<template>
  <div class="mine-pc">
    <HomeHeader :isMine="true"></HomeHeader>
    <!-- 需求详情弹窗 -->
    <el-dialog class="demand-detail-dialog" v-model="dialogdemloes" width="956" :show-close="false" :before-close="gocancel"
      style="border-radius: 12px; background: #EEEEF0;">
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <div :id="titleId" :class="titleClass">
            <h4 style="font-weight: bold">需求详情 - {{ activeDemand.tabName }}</h4>
            <span style="font-weight: 400;
font-size: 12px;
color: #7B7C80;">您可以在此查看需求的全部信息.</span>
          </div>
        </div>
      </template>
      <div style="width: 100%;height: 0px;border: 1px solid #C6C7CC;"></div>
      <div style="color:#7B7C80;font-size: 14px;margin-top: 20px;font-weight: bold;">需求状况</div>
      <ul class="detail-content">
          <li class="detail-item">
            <p class="detail-item-title">ID</p>
            <p class="detail-item-value detail-item-value-number">{{ activeDemand.demandId && padNumber(activeDemand.demandId, 4) }}</p>
          </li>
          <li class="detail-item">
            <p class="detail-item-title">状态</p>
            <p class="detail-item-value">{{ activeDemand.status }}</p>
          </li>
          <li class="detail-item">
            <p class="detail-item-title">类型</p>
            <p class="detail-item-value">{{ activeDemand.type }}</p>
          </li>
          <li class="detail-item">
            <p class="detail-item-title">周期</p>
            <p class="detail-item-value">{{ activeDemand.cycle }}</p>
          </li>
          <li class="detail-item">
            <p class="detail-item-title">单次价格</p>
            <p class="detail-item-value detail-item-value-number">
              {{ activeDemand.price }}
              <!-- <span class="unit">CYN</span> -->
              <img class="unit-CNY" src="@/assets/image/mine/img／currency／CNY／grey@2x.png" alt />
  
            </p>
          </li>
          <li class="detail-item">
            <p class="detail-item-title">有效期</p>
            <p class="detail-item-value detail-item-value-number">
              <span>{{ activeDemand.start_time && format(activeDemand.start_time, "yy.MM.dd") }}</span>
              <span> - </span>
              <span class="end-time-long" v-if="activeDemand.end_time === '长期'">{{ activeDemand.end_time }}</span>
              <span v-else>{{ activeDemand.end_time && format(activeDemand.end_time, "yy.MM.dd") }}</span>
            </p>
          </li>
          <li class="detail-item">
            <p class="detail-item-title">最近已交付</p>
            <p class="detail-item-value detail-item-value-number">{{ activeDemand.lastTime ? format(new Date(activeDemand.lastTime * 1000), "yy.MM.dd") : '--' }}</p>
          </li>
          <li class="detail-item" style="cursor: pointer" @click="gocontributton(1, activeDemand.delivered)">
            <p class="detail-item-title">已交付</p>
            <p class="detail-item-value detail-item-value-number">
              {{ activeDemand.delivered }}
              <span class="unit">篇稿件</span>
            </p>
          </li>
          <li class="detail-item" style="cursor: pointer" @click="gocontributton(2, activeDemand.unDown)">
            <p class="detail-item-title">待下载</p>
            <p class="detail-item-value detail-item-value-number">
              {{ activeDemand.unDown }}
              <span class="unit">篇稿件</span>
            </p>
          </li>
        </ul>
      <div style="color:#7B7C80;font-size: 14px;margin-top: 20px;font-weight: bold;">需求说明</div>
      <div class="listtext">{{  activeDemand.descripttion }}
      </div>
      <div v-if="activeDemand.annex_url" style="color:#7B7C80;font-size: 14px;margin-top: 20px;font-weight: bold;">额外内容(点击查看文件)</div>
      <div
      v-if="activeDemand.annex_url"
      @click="openFile" 
        style="box-sizing: border-box; display: flex;align-items: center;margin-top: 12px;width: 100%;background: #D9D9DB;border-radius:8px;  padding: 20px;cursor: pointer">
        <div></div>
        <div style="font-size: 14px;color: #2E2F33;font-weight: bold;">{{activeDemand.annex_url?.name}}</div>
      </div>
    </el-dialog>
    <!-- 需求详情弹窗结束 -->
    <!-- 设置弹窗开始 -->
    <el-dialog v-model="sttingType" width="800" :show-close="false" :before-close="gocancel"
      style="border-radius: 12px;padding:0px;">
      <template #header="{ close, titleId, titleClass }">
        <div style="padding:20px 20px 10px 20px ;">
          <div :id="titleId" :class="titleClass" style="display: flex;align-items: center;">
            <h4 style="font-weight: bold">设置</h4>
            <h4 style="font-weight: bold;margin-left:150px;">当前账号</h4>
          </div>
        </div>
      </template>
      <div class="setting-content">
        <div class="setting-content-left">
          <div v-for="(item,index) in settingList" :key="item" class="setting-item"
            :class="{active: index === settingitem}" @click="gosettingitem(index)">{{ item }}</div>
        </div>
        <div class="setting-content-right">
          <div style="display: flex;align-items: center;">
            <img v-if="setImage && setImage != ' '" :src="setImage" alt="User Image" class="profile-image" @click="chooseImg()" />
            <img v-else src="@/assets/image/img／defaultAvatar@2x.png" alt="User Image" class="profile-image" @click="chooseImg()"  />
            <div style="margin-left: 24px;">
              <div style="font-size:16px;font-weight: bold;color:#2D2F33;">{{store.userInfo?.nickname}}</div>
              <div style="color:#7B7C80;font-size: 12px;">{{store.userInfo?.mobile}}</div>
            </div>
          </div>
          <div v-if="settingitem==0">
            <div style="color:#2D2F33;font-size: 14px;margin-top: 40px;">修改昵称</div>
            <div class="input-box">
              <input placeholder="请输入昵称" type="text" style="border:none;width:60%; background: none;" v-model="nicknames" />
              <div style="width:24px;height:24px;cursor: pointer;">
                <img src="@/assets/image/mine/icon／inputbox／erease／grey@2x.png" alt style="width: 100%;height: 100%;object-fit: cover;" v-if="nicknames" @click="nicknames=''" />
              </div>
            </div>
            <div style="color:#2D2F33;font-size: 14px;margin-top: 40px;">
              我的号码
              <span style="color:#C6C7CC;font-size:12px">*当前不支持修改手机号</span>
            </div>
            <div class="input-phone">{{ store.userInfo?.mobile }}</div>
          </div>
          <div v-if="settingitem==1">
            <div style="color:#2D2F33;font-size: 14px;margin-top: 40px;">验证码</div>
            <div class="input-box">
              <input v-model="fixUserPasswordForm.mobile_code" type="text" style="border:none;width:40%;background: none;" />
              <div style="width:104px;height:34px;cursor: pointer;" @click="sendcodetel()">{{codeyan}}</div>
            </div>
            <div style="color:#2D2F33;font-size: 14px;margin-top: 40px;">新密码</div>
            <div class="input-box">
              <input v-model="fixUserPasswordForm.password" :type="isPasswordVisible ? 'text' : 'password'" style="border:none;width:60%;background: none;" placeholder="请输入新的密码"  />
              <div style="width:24px;height:24px;cursor: pointer;" @click="togglePasswordVisibility">
                <img src="@/assets/image/mine/icon／login／showpwd／eyesopen@2x.png" alt style="width: 100%;height: 100%;object-fit: cover;" />
              </div>
            </div>
          </div>
          <div v-if="settingitem==2">
            <div style="color:#2D2F33;font-size:14px;margin-top: 44px;">若您确定要退出当前账号, 请点击下方按钮.</div>
            <div class="gooutlogin" @click="goout()">退出登录</div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer" style="margin-top:140px;padding-bottom:31px;padding-right:36px">
          <el-button @click="() => {sttingType = false; setImage = store.userInfo?.headimage; nicknames = store.userInfo?.nickname;}" style="border:none;font-weight: bold;">取消</el-button>
          <el-button v-show="settingitem != 2" type="primary" @click="sureopens()" style="
          box-shadow: 1px 2px 4px 1px rgba(69,96,230,0.24);
         border-radius: 8px 8px 8px 8px;
        border: 2px solid #4560E6;
        background-color: #ffffff;
        color: #4560E6;
          
          
          ">确认并关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 设置弹窗结束 -->
    <!-- 交易记录弹窗 -->
    <diaologToScroll @scrollTobottom="handleScrollTrade" v-model="Trade" width="930px">
      <template #header="{ close, titleId, titleClass }">
        <div style="display: flex;align-items: center;justify-content: space-between;">
          <div :id="titleId" :class="titleClass">
            <h4 style="font-weight: bold;
font-size: 16px;
color: #2E2F33;">交易记录</h4>
            <span style="font-size: 12px;color: #999">您可以在此查看账户余额变动的详细情况.</span>
          </div>
        <el-popover  ref="tradRef" @hide="() => {
            orderPage.page = 1;
            radeOrderList = []
          queryOrderListData()
        }" popper-class="filter-popper-box" :show-arrow="false" :teleported="false" placement="right-start" :width="600" trigger="click">
      <template #reference>
           <div class="fisder">
            <img src="@/assets/image/mine/icon／calendar／black@2x.png" alt="" style="width:16px;height:16px;object-fit: cover;" />
            <div style="font-family: Komu A, Komu A; font-size: 18px;color:#2E2F33;margin-left:5px;font-weight: 500;">{{format(valuedatarili[0], "yy.MM.dd")}}-{{format(valuedatarili[1], "yy.MM.dd")}}</div>
          </div>
      </template>
      <div class="popper-content">
        <div class="popper-title" style="display: flex;align-items: center;justify-content: space-between;">
          <div class="lef">
            <div class="title" style="font-weight: bold;font-size: 16px;">开始日期/结束日期</div>
            <div  style="color:#7B7C80;font-size: 12px;margin-top:5px;">请选择时间端点.</div>
          </div>
          <img @click="tradRef.hide()" width="42px" src="@/assets/image/mine/button／common／ok／normal@2x.png" alt="">
        </div>
        <div class="line"></div>
        <div class="filter-timer2">
           <el-date-picker
            ref="filterTimepickerRef"
        v-model="valuedatarili"
        type="daterange"
        range-separator="To"
        :size="size"
        value-format="YYYY-MM-DD"
        @calendar-change="datajiaoyi"
        :teleported="false"
      />

        </div>
        </div>
    </el-popover>
        </div>
      </template>
      <div style="width: 100%;height: 0px;border: 1px solid #C6C7CC;"></div>
      <div class="card-content">
        <div v-for="(item,index) in tradeList" :key="index" class="card-item" :class="{active: item.value == tradeitem}"
          @click="gotradeitem(item.value)">{{ item.name }} </div>
      </div>
      <div class="list-content" v-loading="tradeLoading">
      <div class="filker" v-for="(item,index) in radeOrderList" :key="item.id">
        <div class="idtitle">{{item.numerial_status }}{{ item.balance }}</div>
        <div class="demoslisttwo">
          <div>
            <div style="font-size: 12px;color:#ADAEB3">AISEO业务单号</div>
            <div style="cursor: pointer" @click="handleCopy(item.order_num)" class="order-item-value">{{ item.order_num }}</div>
          </div>
          <div style="width: 0px;height: 12px;border: 1px solid #000000;opacity: 0.2;margin:0 20px"></div>
          <div>
            <div style="font-size: 12px;color:#ADAEB3">平台</div>
            <div style="width:24px;height:21px; margin-top: 4px;">
              <img v-if="item.pay_type == 1" src="@/assets/image/mine/icon／bill／wechat@2x.png" alt="" style="width:100%;height:18px;object-fit: cover;">
              <img v-if="item.pay_type == 3" src="@/assets/image/mine/icon／bill／AISEO@2x.png" alt="" style="width:100%;height:18px;object-fit: cover;">
              <img v-if="item.pay_type == 2" src="@/assets/image/mine/zhifubao.svg" alt="" style="width:100%;height:18px;object-fit: contain">
            </div>
          </div>
          <div style="width: 0px;height: 12px;border: 1px solid #000000;opacity: 0.2;margin:0 20px"></div>
          <div>
            <div style="font-size: 12px;color:#ADAEB3">平台交易单号</div>
            <div style="cursor: pointer" @click="handleCopy(item.pay_num || item.order_num)" class="order-item-value">{{ item.pay_num || item.order_num }}</div>
          </div>
          <div style="width: 0px;height: 12px;border: 1px solid #000000;opacity: 0.2;margin:0 20px"></div>
          <div>
            <div style="font-size: 12px;color:#ADAEB3">类型</div>
            <div style="font-size: 14px;color: #47484D;font-weight: bold;">{{ typeMap[item.way] }}</div>
          </div>
          <div style="width: 0px;height: 12px;border: 1px solid #000000;opacity: 0.2;margin:0 20px"></div>
          <div>
            <div style="font-size: 12px;color:#ADAEB3">余额</div>
            <div class="order-item-value">
              {{ item.balance_after_transaction }}
              <span style="font-size: 10px;color: #ABAEB3;margin-left: 5px;">CNY</span>
            </div>
          </div>
          <div style="width: 0px;height: 12px;border: 1px solid #000000;opacity: 0.2;margin:0 20px"></div>
          <div>
            <div style="font-size: 12px;color:#ADAEB3">交易时间</div>
            <div class="order-item-value">{{ item.create_time }}</div>
          </div>
        </div>
        <div></div>
      </div>
    </div>
    </diaologToScroll>
    <!-- 交易记录弹窗结束 -->
    <div class="mine-base-info" v-loading="loadingMine">
      <div class="my-info">
        <div class="info-left">
          <div class="user-avatar">
            <img v-if="store.userInfo?.headimage && store.userInfo?.headimage != ' '" :src="store.userInfo?.headimage" alt />
            <img v-else src="@/assets/image/img／defaultAvatar@2x.png" alt="User Image" />
          </div>
          <div class="info-left-content">
            <p class="info-left-txt">当前登录</p>
            <p class="username">{{ store.userInfo?.nickname }}</p>
          </div>
          <div class="info-my-Balance">
            <img class="icon" src="@/assets/image/mine/icon／bankcard／grey@2x.png" alt />
            <div class="balance-content">
              <p class="info-left-txt">我的余额</p>
              <p class="balance">
                {{ store.userInfo?.balance }}
                <img class="icon-CNY" src="@/assets/image/mine/img／currency／CNY／white@2x.png" alt />
  
                <!-- <span>CNY</span> -->
              </p>
            </div>
            <div v-if="demandTabInfo.length" class="Remaining-times">还可进行约{{ computedTaskNum }}次 撰写任务</div>
          </div>
        </div>
        <ul class="info-right">
          <li class="right-item" @click="goplay()">
            <img class="icon" src="@/assets/image/mine/button／entrance／topup@2x.png" alt />
            <!-- <p>充值</p> -->
          </li>
          <li class="right-item" @click="goTrade()">
            <img class="icon" src="@/assets/image/mine/button／entrance／bill@2x.png" alt />
            <!-- <p>账单</p> -->
          </li>
          <li class="right-item" @click="setting()">
            <img class="icon" src="@/assets/image/mine/button／entrance／settings@2x.png" alt />
            <!-- <p>设置</p> -->
          </li>
        </ul>
      </div>
      <template v-if="demandTabInfo.length > 0">
      <div class="Demand-tab-outer scrollbar-class">
      <div class="Demand-tab">
        <div class="Demand-tab-item" :class="{
                  'active-Demand-tab': item.demandId === activeDemand?.demandId,
                }" v-for="item in demandTabInfo" :key="item.demandId" @click="()=> {handleClickTab(item)}">
                <span class="Demand-tab-item-name">{{ item.tabName }}</span>
          <img v-if="item.demandId === activeDemand?.demandId" class="img-edit"
            src="@/assets/image/mine/icon／mainTab／editname／black@2x.png" alt="">
        </div>
      </div>
    </div>
      <div class="Demand-tab-detail">
        <div class="detail-title-line">
          <span class="icon-status" :class="demandStatus(activeDemand)"></span>
          <div class="detail-title">需求详情</div>
          <div style="  position: absolute; top: 24px;  right: 24px;">
            <el-dropdown>
              <div class="detail-setting">
                <div></div>
                <div></div>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="Demand()">需求详情</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
        <ul class="detail-content">
          <li class="detail-item">
            <p class="detail-item-title">ID</p>
            <p class="detail-item-value detail-item-value-number">{{ activeDemand.demandId && padNumber(activeDemand.demandId, 4) }}</p>
          </li>
          <li class="detail-item">
            <p class="detail-item-title">状态</p>
            <p class="detail-item-value">{{ activeDemand.status }}</p>
          </li>
          <li class="detail-item">
            <p class="detail-item-title">类型</p>
            <p class="detail-item-value">{{ activeDemand.type }}</p>
          </li>
          <li class="detail-item">
            <p class="detail-item-title">周期</p>
            <p class="detail-item-value">{{ activeDemand.cycle }}</p>
          </li>
          <li class="detail-item">
            <p class="detail-item-title">单次价格</p>
            <p class="detail-item-value detail-item-value-number">
              {{ activeDemand.price }}
              <!-- <span class="unit">CYN</span> -->
              <img class="unit-CNY" src="@/assets/image/mine/img／currency／CNY／grey@2x.png" alt />
  
            </p>
          </li>
          <li class="detail-item">
            <p class="detail-item-title">有效期</p>
            <p class="detail-item-value detail-item-value-number">
              <span>{{ activeDemand.start_time && format(activeDemand.start_time, "yy.MM.dd") }}</span>
              <span> - </span>
              <span class="end-time-long" v-if="activeDemand.end_time === '长期'">{{ activeDemand.end_time }}</span>
              <span v-else>{{ activeDemand.end_time && format(activeDemand.end_time, "yy.MM.dd") }}</span>
            </p>
          </li>
          <li class="detail-item" style="cursor: pointer" @click="handleOpenTask">
            <p class="detail-item-title">最近已交付</p>
            <p class="detail-item-value detail-item-value-number">{{ activeDemand.lastTime ? format(new Date(activeDemand.lastTime * 1000), "yy.MM.dd") : '--' }}</p>
          </li>
          <li class="detail-item" style="cursor: pointer" @click="gocontributton(1, activeDemand.delivered)">
            <p class="detail-item-title">已交付</p>
            <p class="detail-item-value detail-item-value-number">
              {{ activeDemand.delivered }}
              <span class="unit">篇稿件</span>
            </p>
          </li>
          <li class="detail-item" style="cursor: pointer" @click="gocontributton(2, activeDemand.unDown)">
            <p class="detail-item-title">待下载</p>
            <p class="detail-item-value detail-item-value-number">
              {{ activeDemand.unDown }}
              <span class="unit">篇稿件</span>
            </p>
          </li>
        </ul>
      </div>
      <div class="Demand-task-create">
        <div class="task-list">
          <div class="task-title-line">
            <!-- <span
                    >您当前有<span class="task-num">00</span>个任务需要手动操作.</span
                  > -->
            <div class="task-search-box">
              <el-input @change="queryTaskListInfo(activeDemand.demandId)" clearable v-model="taskFilterForm.searchText" style="width: 240px" placeholder="搜索关键词">
                <template #prefix>
                  <el-icon class="el-input__icon">
                    <Search />
                  </el-icon>
                </template>
              </el-input>
            </div>
            <div class="task-filter">
              <!-- 状态筛选器 -->
              <el-popover @show="filterIshow.status = true" v-if="taskFilterList.findIndex(dd => dd.isSelect) === -1 || filterIshow.status"  ref="filterStatuspickerPopRef" @hide="() => {filterIshow.status = false;queryTaskListInfo(activeDemand.demandId)}" popper-class="filter-popper-box"  :teleported="false" :show-arrow="false" placement="right-start" :width="248" trigger="click">
              <template #reference>
                <div class="icon-filter-normal">
                  <div class="tips-filter" v-if="taskFilterList[0].num > 0"></div>
                  <el-icon>
                <Filter />
              </el-icon>
                </div>
              </template>
               <div class="popper-content">
                <div class="popper-title">
                  <div class="lef">
                    <div class="title">筛选</div>
                    <p>此处可多选.</p>
                  </div>
                  <img @click="filterStatuspickerPopRef.hide()" src="@/assets/image/mine/button／common／ok／normal@2x.png" alt="">
                </div>
                <div class="line"></div>
                <div class="filter-list">
                  <div class="filter-item" :class="{'filter-item-active': item.isSelect}" @click="item.isSelect = !item.isSelect" v-for="(item, index) in taskFilterList" :key="index">
                    <span class="filter-item-name">{{ item.title }}</span>
                    <span class="filter-item-num">{{ item.num }}个</span>
                  </div>
                </div>
               </div>
            </el-popover>
            <div class="icon-selected icon-filter-normal" @click="() => {taskFilterList.forEach(dd => dd.isSelect = false);queryTaskListInfo(activeDemand.demandId)}" v-else>
              <div class="tips-filter" v-if="taskFilterList[0].num > 0"></div>
              <el-icon>
                <Filter />
              </el-icon>
            </div>

<!-- 日期筛选 -->
    <el-popover @show="filterIshow.time = true;" v-if="!taskFilterForm.timeFilter || filterIshow.time"  ref="filterTimepickerPopRef" @hide="() =>{filterIshow.time = false;queryTaskListInfo(activeDemand.demandId)}" popper-class="filter-popper-box" :show-arrow="false" :teleported="false" placement="right-start" :width="284" trigger="click">
      <template #reference>
        <div class="icon-filter-normal">
          <el-icon>
                <Calendar />
              </el-icon>
        </div>

      </template>
      <div class="popper-content">
        <div class="popper-title">
          <div class="lef">
            <div class="title">筛选</div>
            <p v-if="activeDemand.cycle === '周交'">请选择预期交稿周期.</p>
            <p v-if="activeDemand.cycle === '日交'">请选择预期交稿日.</p>
          </div>
          <img @click="filterTimepickerPopRef.hide()" src="@/assets/image/mine/button／common／ok／normal@2x.png" alt="">
        </div>
        <div class="line"></div>
        <div class="filter-timer">
          <el-date-picker @pick="handleChangeTimePicker" :editable="false" ref="filterTimepickerRef" v-if="activeDemand.cycle === '日交'"
            v-model="taskFilterForm.timeFilter" type="date" placeholder="Pick a day" :clearable="false"
            format="YY.MM.DD" :teleported="false" />
          <el-date-picker @pick="handleChangeTimePicker"  :editable="false" ref="filterTimepickerRef" v-if="activeDemand.cycle === '周交'"
            v-model="taskFilterForm.timeFilter" type="week" placeholder="周交范围" :clearable="false"
      :teleported="false" />

        </div>
        </div>
    </el-popover>
    <div class="icon-selected icon-filter-normal" @click="() => {taskFilterForm.timeFilter = '';queryTaskListInfo(activeDemand.demandId)}" v-else>
            <el-icon>
                <Calendar />
              </el-icon>
            </div>
            </div>
          </div>
          <div class="create-button" :class="{
                    'active-task-item': !currentTask?.taskId,
                  }" @click="handleClickTask( null, true)">
            <el-icon>
              <CirclePlus />
            </el-icon>
            添加关键词
          </div>
          <ul ref="scrollContainer" class="task-list-ul scrollbar-class">
            <li v-for="item in activeDemand?.taskList || []" :key="item.taskId" class="task-item" :class="{
                      'active-task-item': currentTask?.taskId === item?.taskId,
                      'icon-status-done-grey-fill': singleDemandStatus(item) === 'icon-status-done'
                    }" @click="handleClickTask(item)">
              <img v-if="willDo.includes(item.status) && processList[0].includes(item.status)" class="status-img"
                src="@/assets/image/mine/img／mission／step／A／yellow@2x.png" alt="" />
              <img v-if="willDo.includes(item.status) && processList[1].includes(item.status)" class="status-img"
                src="@/assets/image/mine/img／mission／step／B／yellow@2x.png" alt="" />
              <img v-if="doing.includes(item.status) && processList[1].includes(item.status)" class="status-img"
                src="@/assets/image/mine/img／mission／step／B／blue@2x.png" alt="" />
              <img v-if="doing.includes(item.status) && processList[2].includes(item.status)" class="status-img"
                src="@/assets/image/mine/img／mission／step／C／blue@2x.png" alt="" />
              <img v-if="willDo.includes(item.status) && processList[3].includes(item.status)" class="status-img"
                src="@/assets/image/mine/img／mission／step／D／yellow@2x.png" alt="" />
              <img v-if="doing.includes(item.status) && processList[3].includes(item.status)" class="status-img"
                src="@/assets/image/mine/img／mission／step／D／blue@2x.png" alt="" />
              <img v-if="singleDemandStatus(item) === 'icon-status-doing' && processList[4].includes(item.status)"
                class="status-img" src="@/assets/image/mine/img／mission／step／E／blue@2x.png" alt="" />
              <img v-if="singleDemandStatus(item) === 'icon-status-done' && processList[4].includes(item.status)"
                class="status-img" src="@/assets/image/mine/img／mission／step／E／grey@2x.png" alt="" />
              <img v-if="item.status === '未补充已过期'"
              class="status-img" src="@/assets/image/mine/img／mission／step／A／grey@2x.png" alt="" />
              <img v-if="item.status === '已取消'"
              class="status-img" src="@/assets/image/mine/img／mission／step／F／grey@2x.png" alt="" />
  
              <div class="task-item-info">
                <span class="info-time">{{ format(item.estimatedTime,"yy.MM.dd") }}</span>
                <img class="info-status-img" v-if="item.status === '待补充'"
                  src="@/assets/image/mine/img／missionLabel／A／awaitFilling／yellow@2x.png" alt="">
                <img class="info-status-img" v-if="item.status === '关键词审核中'"
                  src="@/assets/image/mine/img／missionLabel／B／auditing／blue@2x.png" alt="">
                <img class="info-status-img" v-if="item.status === '待确认'"
                  src="@/assets/image/mine/img／missionLabel／D／awaitConfirm／yellow@2x.png" alt="">
                <img class="info-status-img" v-if="item.status === '稿件修改中'"
                  src="@/assets/image/mine/img／missionLabel／D／modifying／blue@2x.png" alt="">
                <img class="info-status-img"
                  v-if="item.status === '已完成' && singleDemandStatus(item) === 'icon-status-doing'"
                  src="@/assets/image/mine/img／missionLabel／E／done／blue@2x.png" alt="">
                <img class="info-status-img"
                  v-if="item.status === '已完成' && singleDemandStatus(item) === 'icon-status-done'"
                  src="@/assets/image/mine/img／missionLabel／E／doneExpired／grey@2x.png" alt="">
                <img class="info-status-img" v-if="item.status === '待修改'"
                  src="@/assets/image/mine/img／missionLabel／B／awaitModify／yellow@2x.png" alt="">
                <img class="info-status-img" v-if="item.status === '撰写中'"
                  src="@/assets/image/mine/img／missionLabel／C／writing／blue@2x.png" alt="">
                <img class="info-status-img" v-if="item.status === '未补充已过期'"
                src="@/assets/image/mine/img／missionLabel／A／fillingExpired／grey@2x.png" alt="">
                <img class="info-status-img" v-if="item.status === '已取消'"
                src="@/assets/image/mine/img／missionLabel／E／cancelled／grey@2x.png" alt="">
              <p class="key-words">
                  {{ item.keyword || "暂无关键词. 请手动添加" }}
                </p>
              </div>
            </li>
          </ul>
        </div>
        <!-- 创建任务流程 -->
        <div class="task-content" :class="[singleDemandStatus(currentTask) + '-grey-fill', singleDemandStatus(currentTask) + '-grey-fill-click']">
          <span class="icon-status" :class="singleDemandStatus(currentTask)"></span>
          <div class="task-detail-time">
            {{
                  createTaskForm.createTaskType === 'multiple' ? 'YY-MM-DD' :
            currentTask.estimatedTime &&
            format(currentTask.estimatedTime, "yy.MM.dd")
            }}
          </div>
          <div class="task-detail-info">
            <div class="detail-item">
              <p class="detail-item-title">任务ID</p>
              <p class="detail-item-value detail-item-value-number">{{ currentTask.taskId && padNumber(currentTask.taskId, 4) || '——'}}</p>
            </div>
            <div class="detail-item">
              <p class="detail-item-title">状态</p>
              <img class="info-status-img" v-if="currentTask.status === '待补充'"
                src="@/assets/image/mine/img／missionDetail／A／awaitFilling／yellow@2x.png" alt="">
              <img class="info-status-img" v-if="currentTask.status === '关键词审核中'"
                src="@/assets/image/mine/img／missionDetail／B／auditing／blue@2x.png" alt="">
              <img class="info-status-img" v-if="currentTask.status === '待确认'"
                src="@/assets/image/mine/img／missionDetail／D／awaitConfirm／yellow@2x.png" alt="">
              <img class="info-status-img" v-if="currentTask.status === '稿件修改中'"
                src="@/assets/image/mine/img／missionDetail／D／modifying／blue@2x.png" alt="">
              <img class="info-status-img"
                v-if="currentTask.status === '已完成' && singleDemandStatus(currentTask) === 'icon-status-doing'"
                src="@/assets/image/mine/img／missionDetail／E／done／blue@2x.png" alt="">
              <img class="info-status-img"
                v-if="currentTask.status === '已完成' && singleDemandStatus(currentTask) === 'icon-status-done'"
                src="@/assets/image/mine/img／missionDetail／E／doneExpired／grey@2x.png" alt="">
              <img class="info-status-img" v-if="currentTask.status === '待修改'"
                src="@/assets/image/mine/img／missionDetail／B／awaitModify／yellow@2x.png" alt="">
              <img class="info-status-img" v-if="currentTask.status === '撰写中'"
                src="@/assets/image/mine/img／missionDetail／C／writing／blue@2x.png" alt="">
              <img class="info-status-img" v-if="currentTask.status === '未补充已过期'"
                src="@/assets/image/mine/img／missionDetail／A／fillingExpired／grey@2x.png" alt="">
                <img class="info-status-img" v-if="currentTask.status === '已取消'"
                src="@/assets/image/mine/img／missionDetail／E／cancelled／grey@2x.png" alt="">
              <!-- <p
                      class="detail-item-value"
                      :class="singleDemandStatus(currentTask) + '-text'"
                    >
                      {{ currentTask.status.slice(-3) }}
                    </p> -->
            </div>
            <div class="detail-item">
              <p class="detail-item-title">稿件</p>
              <p class="detail-item-value">
                <span style="font-size: 17px; font-weight: 500">{{ currentTask.page || "--" }}</span>
                <span class="unit">篇</span>
              </p>
            </div>
            <div class="detail-item">
              <p class="detail-item-title">预计交稿</p>
              <p class="detail-item-value detail-item-value-number">
                {{
                  createTaskForm.createTaskType === 'multiple' ? 'YY-MM-DD' :
                currentTask.estimatedTime &&
                format(currentTask.estimatedTime, "yy.MM.dd")
                }}
              </p>
            </div>
          </div>
          <!-- 流程图 -->
          <div class="task-detail-process">
            <div class="process-icon">
              <div class="process-icon-img" v-if="processList.findIndex(dd => dd.includes(currentTask.status)) === 0">
                <img v-if="currentTask.status === '未补充已过期'" src="@/assets/image/mine/img／mission／step／A／grey@2x.png" alt="" />
                <img v-else src="@/assets/image/mine/img／mission／step／A／yellow@2x.png" alt="" />
              </div>
              <div class="process-icon-img" v-if="processList.findIndex(dd => dd.includes(currentTask.status)) <= 1">
                <img v-if="processList[1].includes(currentTask.status) && willDo.includes(currentTask.status)"
                  src="@/assets/image/mine/img／mission／step／B／yellow@2x.png" alt="" />
                <img v-else-if="processList[1].includes(currentTask.status)"
                  src="@/assets/image/mine/img／mission／step／B／blue@2x.png" alt="" />
                <img v-else src="@/assets/image/mine/img／mission／step／B／grey@2x.png" alt="" />
              </div>
              <div class="process-icon-img" v-if="processList.findIndex(dd => dd.includes(currentTask.status)) <= 2">
                <img v-if="processList[2].includes(currentTask.status) && willDo.includes(currentTask.status)"
                  src="@/assets/image/mine/img／mission／step／C／blue@2x.png" alt="" />
                <img v-else-if="processList[2].includes(currentTask.status)"
                  src="@/assets/image/mine/img／mission／step／C／blue@2x.png" alt="" />
                <img v-else src="@/assets/image/mine/img／mission／step／C／grey@2x.png" alt="" />
  
              </div>
              <div class="process-icon-img" v-if="processList.findIndex(dd => dd.includes(currentTask.status)) <= 3">
                <img v-if="processList[3].includes(currentTask.status) && willDo.includes(currentTask.status)"
                  src="@/assets/image/mine/img／mission／step／D／yellow@2x.png" alt="" />
                <img v-else-if="processList[3].includes(currentTask.status)"
                  src="@/assets/image/mine/img／mission／step／D／blue@2x.png" alt="" />
                <img v-else src="@/assets/image/mine/img／mission／step／D／grey@2x.png" alt="" />
              </div>
              <div class="process-icon-img">
                <img v-if="currentTask.status === '已完成' && singleDemandStatus(currentTask) === 'icon-status-doing'"
                  src="@/assets/image/mine/img／mission／step／E／blue@2x.png" alt="" />
                <img v-else src="@/assets/image/mine/img／mission／step／E／grey@2x.png" alt="" />
              </div>
            </div>
            <span class="process-triangle"></span>
            <div ref="processListRef" class="process-content scrollbar-class">
              <!-- 创建任务 -->
              <div class="process-content-info" v-if="currentTask.status === '待补充'">
                <div class="process-content-title" @click="currentTask.slider = !currentTask.slider">
                  <span>创建任务</span>
                  <img v-if="!currentTask.slider" src="@/assets/image/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                  <img class="slider-icon-up" v-else src="@/assets/image/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                </div>
                <div class="process-content-container" v-show="!currentTask.slider">
                  <div v-if="activeDemand.type !== '单次任务'" class="process-content-item" :class="{'process-content-item-disabel': createTaskForm.taskId || activeDemand.type === '单次任务'}">
                    <div class="process-content-item-title">选择任务类型</div>
  
                    <div class="process-content-item-content">
                      <span class="item-choose-type" :class="{
                                'active-item-choose-type':
                                  createTaskForm.createTaskType === 'single',
                              }" @click="handleChangeType('single')">
                        <span class="content-item-icon"></span>
                        <span class="process-text">单次任务关键词</span>
                      </span>
                      <span class="item-choose-type" :class="{
                                'active-item-choose-type':
                                  createTaskForm.createTaskType === 'multiple',
                              }" @click="handleChangeType('multiple')">
                        <span class="content-item-icon content-item-icon-muiltiple"></span>
                        <span class="process-text">批量任务关键词</span>
                      </span>
                    </div>
                  </div>
  
                  <!-- 单个关键词 -->
                  <div class="process-content-item" v-show="createTaskForm.createTaskType === 'single'">
                    <div class="process-content-item-title">关键词</div>
                    <div class="process-content-item-content" :class="{'process-content-item-disabel': createTaskForm.taskId || activeDemand.type === '单次任务'}">
                      <span class="item-content-item active-item-process item-time-picker-process" :class="{
                                'item-time-picker-process-week':
                                  activeDemand.cycle === '周交',
                              }">
                        <el-date-picker :disabled-date="disabledDayDate" :editable="false" :prefix-icon="DatePickerPrefix" v-if="activeDemand.cycle === '日交'" class="item-time-picker"
                          v-model="createTaskForm.estimatedTime" type="date" placeholder="Pick a day" :clearable="false"
                          format="YY.MM.DD" :teleported="false" />
                        <el-date-picker :disabled-date="disabledWeekDate" :editable="false" :prefix-icon="DatePickerPrefixWeek" v-if="activeDemand.cycle === '周交'" class="item-time-picker"
                          v-model="createTaskForm.estimatedTime" type="week" placeholder="周交范围" :clearable="false"
                          :format="`YY.MM.DD-${
                                  createTaskForm.estimatedTime &&
                                  format(
                                    add(createTaskForm.estimatedTime, { days: 6 }),
                                    'yy.MM.dd'
                                  )
                                }`" :teleported="false" />
                      </span>
                    </div>
                    <div class="process-content-keywords">
                      <el-input @input="createFormButton" class="mt-8 form-item-textarea" maxlength="2000" v-model="createTaskForm.keyword"
                        placeholder="请写下您预想的关键词. " type="textarea" resize="none" autosize />
                    </div>
                  </div>
                  <!-- 批量关键词 -->
                  <div class="process-content-item" v-show="createTaskForm.createTaskType === 'multiple'">
                    <div class="process-content-item-title">关键词</div>
  
                    <div class="process-content-keywords"
                      v-for="(item ,index) in createTaskForm.estimatedTimeList" :key="item.time">
                      <div class="mt-12 time-picker-flex">

                      <div class="multiple-task-time item-content-item item-time-picker-process"
                      :class="{
                                'item-time-picker-process-week':
                                  activeDemand.cycle === '周交',
                              }"
                      v-show="createTaskForm.createTaskType === 'multiple'">
                        <el-date-picker :disabled-date="disabledDayDate"  :editable="false" :prefix-icon="DatePickerPrefix" v-if="activeDemand.cycle === '日交'" class="item-time-picker" v-model="item.time"
                          type="date" format="YY.MM.DD" placeholder="Pick a day" :clearable="false" :teleported="false" />
                        <el-date-picker :disabled-date="disabledWeekDate" :editable="false" :prefix-icon="DatePickerPrefixWeek" v-if="activeDemand.cycle === '周交'" class="item-time-picker" v-model="item.time"
                          type="week" :format="`YY.MM.DD-${
                                  item.time &&
                                  format(add(item.time, { days: 6 }), 'yy.MM.dd')
                                }`" placeholder="周交范围" :clearable="false" :teleported="false" />

                    
                    </div>
                    <div class="delete-button" v-show="(createTaskForm?.estimatedTimeList?.length - 1 == index) && index != 0"
                        @click="handleRemoveTime()">
                        <img src="@/assets/image/mine/icon／missionlist／removeMission／red@2x.png" alt="" />
                      </div>
                    </div>
                      <el-input @input="createFormButton" class="mt-8 form-item-textarea" maxlength="2000" v-model="item.keyword"
                        placeholder="请写下您预想的关键词. " type="textarea" resize="none" autosize />
                    </div>
                    <div v-show="createTaskForm.createTaskType === 'multiple'" class="add-button"
                      @click="handleAddTime()">
                      <img src="@/assets/image/mine/icon／missiondetail／addbutton／add／black@2x.png" alt="" />
                    </div>
                  </div>
                </div>
              </div>
              <!-- 未补充已过期 -->
              <div class="process-content-info" v-if="currentTask.status === '未补充已过期'">
                <div class="process-content-title" @click="currentTask.slider = !currentTask.slider">
                  <span>创建任务.</span>
                  <img v-if="!currentTask.slider" src="@/assets/image/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                  <img class="slider-icon-up" v-else src="@/assets/image/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                </div>
                <div class="process-content-container" v-show="!currentTask.slider">
                  <!-- 单个关键词 -->
                  <div class="process-content-item">
                    <div class="process-content-item-title" style="color: #ADAEB3">关键词</div>
                    <div class="process-content-item-content">
                      <span class="item-content-item active-item-process item-time-picker-process" :class="{
                                'item-time-picker-process-week':
                                  activeDemand.cycle === '周交',
                              }">
                        <el-date-picker :editable="false" :prefix-icon="DatePickerPrefix" v-if="activeDemand.cycle === '日交'" class="item-time-picker"
                          v-model="createTaskForm.estimatedTime" type="date" placeholder="Pick a day" :clearable="false"
                          format="YY.MM.DD" :teleported="false" />
                        <el-date-picker :editable="false" :prefix-icon="DatePickerPrefixWeek" v-if="activeDemand.cycle === '周交'" class="item-time-picker"
                          v-model="createTaskForm.estimatedTime" type="week" placeholder="周交范围" :clearable="false"
                          :format="`YY.MM.DD-${
                                  createTaskForm.estimatedTime &&
                                  format(
                                    add(createTaskForm.estimatedTime, { days: 6 }),
                                    'yy.MM.dd'
                                  )
                                }`" :teleported="false" />
                      </span>
                    </div>
                    <div class="process-content-keywords">
                      <el-input class="mt-8 form-item-textarea form-item-textarea-diabled" disabled maxlength="2000" v-model="currentTask.keyword"
                        placeholder="当前任务超时, 视为用户主动放弃此次交稿服务. 您可以通过创建新任务提交关键词. " type="textarea" resize="none" autosize />
                    </div>
                  </div>
                </div>
              </div>

              <!-- 关键词审核中 -->
              <div class="process-content-info" v-if="currentTask.status === '关键词审核中'">
                <div class="process-content-title" @click="currentTask.slider = !currentTask.slider">
                  <span>该任务正在进行关键词审核, 您当前不可操作.</span>
                  <img v-if="!currentTask.slider" src="@/assets/image/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                  <img class="slider-icon-up" v-else src="@/assets/image/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                </div>
                <div class="keywords-version" v-show="!currentTask.slider">
                  <div class="keywords-item" v-for="(item, index) in currentTask.keywordList" :key="index">
                    <p class="keywords-item-time">
                      关键词提交于
                      {{ item.time &&item.time && format(item.time, "yy.MM.dd - HH:mm:ss") }} 
                      <span v-if="item.status === 2">| 平台驳回于
                      {{ item.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss") }}</span>
                    </p>
                    <div class="keywords-item-info">
                      <p class="keywords-item-text mt-12">
                      <template v-if="item.status === 2">
                        <div class="edit-color">
                        驳回原因：
                      <p>{{ item.rejectReason }}</p>
                    </div>
                      原关键词：
                    </template>
                      <p>{{ item.keyword }}</p>
                      </p>
                      <!-- <div class="process-content-time">
                        Ver.
                        {{ index + 1 }}
                      </div> -->
                    </div>
                  </div>
                </div>
              </div>
              <!-- 待修改 -->
              <div class="process-content-info" v-if="currentTask.status === '待修改'">
                <div class="process-content-title edit-color" @click="currentTask.slider = !currentTask.slider">
                  <span>关键词审核不通过, 请您修改后重新提交审核.</span>
                  <img v-if="!currentTask.slider" src="@/assets/image/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                  <img class="slider-icon-up" v-else src="@/assets/image/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                </div>
                <div class="keywords-version" v-show="!currentTask.slider">
                  <div class="keywords-item" v-for="(item, index) in currentTask.keywordList" :key="index">
                    <p class="keywords-item-time">
                      关键词提交于
                      {{ item.time && format(item.time, "yy.MM.dd - HH:mm:ss") }} <span v-if="item.status === 2">| 平台驳回于
                      {{item.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss") }}</span>
                    </p>
                    <div class="keywords-item-info">
                      <p class="keywords-item-text mt-12">
                        <template v-if="item.status === 2">
                          <div class="edit-color">
                        驳回原因：
                      <p>{{ item.rejectReason }}</p>
                    </div>
                      原关键词：
                    </template>
                      <p>{{ item.keyword }}</p>
                      </p>
                      <!-- <div class="process-content-time">
                        Ver.
                        {{ index + 1 }}
                      </div> -->
                    </div>
                  </div>
                  <p class="keywords-item-time mt-24">
                    修改关键词
                  </p>
                  <div class="process-content-item-content process-content-keywords">
                    <el-input class="form-item-textarea" maxlength="2000" v-model="currentTask.keywordEdit"
                      placeholder="请在此输入修改后的关键词" type="textarea" resize="none" autosize />
                    <!-- <div class="process-content-time">
                      Ver.{{
                      currentTask.keywordList.length + 1
                      }}
                    </div> -->
                  </div>
                </div>
              </div>
  
              <!-- 撰写中 -->
              <div class="process-content-info" v-if="currentTask.status === '撰写中'">
                <div class="process-content-title" @click="currentTask.slider = !currentTask.slider">
                  <span>关键词审核已通过, 编辑们加班为您创作文案中...</span>
                  <img v-if="!currentTask.slider" src="@/assets/image/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                  <img class="slider-icon-up" v-else src="@/assets/image/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                </div>
                <div class="keywords-version" v-show="!currentTask.slider">
                  <div class="keywords-item" v-for="(item, index) in currentTask.keywordList" :key="index">
                    <template v-if="item.status == 2 || item.status == 1 || item.status == 3 ">
                      <p class="keywords-item-time">
                      关键词提交于
                      {{ item?.time && format(item.time, "yy.MM.dd - HH:mm:ss") }}
                      <span v-if="item.status === 2">| 平台驳回于
                      {{item.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss") }}</span> 
                      <span v-if="item.status === 3">
                        | 审核通过于
                      {{ item?.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss") }}
                      </span>
                    </p>
                    <div class="keywords-item-info">
                      <p class="keywords-item-text mt-12">
                        <template v-if="item.status === 2">
                          <div class="edit-color">
                        驳回原因：
                      <p>{{ item.rejectReason }}</p>
                    </div>
                      原关键词：
                    </template>
                      <p>{{ item.keyword }}</p>
                      </p>
                    </div>
                    </template>
                  <template v-if="item.status == 7">
                    <p class="keywords-item-time">
                      修改意见提交于
                      {{ item.rejectTime && format(item.rejectTime, "yy.MM.dd- HH:mm:ss") }}
                    </p>
                    <div class="keywords-item-info">
                      <p class="scrollbar-class keywords-item-text mt-12" v-html="item.rejectReason"></p>
                    </div>
                  </template>
                  <template v-if="item.status == 5">
                    <p class="keywords-item-time complete-blue-color">
                      <span v-if="currentTask.status === '已完成'">稿件</span>
                      完成于 {{item.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss")}}
                    </p>
                    <div class="keywords-item-info keywords-item-can-click" @click="handleGotoPreview">
                      <p class="keywords-item-text mt-12 keywords-item-text-downe">
                        <el-icon>
                          <Document />
                        </el-icon>
                        {{currentTask.keyword.slice(0, 12)}}<span v-if="currentTask.endTime">{{ currentTask.endTime }}</span>
                      </p>
                      <div class="process-content-time complete-blue-color">
                        Ver.{{ item.manuscriptNum }}
  
                      </div>
                    </div>
                  </template>
                  </div>
                  <div class="keywords-item">
                    <p class="keywords-item-time">
                      稿件预览
                    </p>
                    <div class="keywords-item-info">
                      <p class="keywords-item-text mt-12">
                        <el-icon>
                          <Document />
                        </el-icon>
                        稿件撰写中
                      </p>
                      <div class="process-content-time">
                        Ver.{{ currentTask.keywordList.filter(item => item.status === 5).length + 1 }}
  
                      </div>
                    </div>
  
                  </div>
                </div>
              </div>
              <!-- 待确认&已完成 -->
              <div class="process-content-info" v-if="currentTask.status === '待确认' || currentTask.status === '已完成'">
                <div class="process-content-title" @click="currentTask.slider = !currentTask.slider">
                  <div v-if="currentTask.status === '待确认'">
                  稿件撰写完毕, 您现在可查阅稿件并确认接收.
                </div>
                <div
                  v-else-if="currentTask.status === '已完成' && singleDemandStatus(currentTask) === 'icon-status-doing'">
                  您的稿件已确认接收, 请务必在30天内保存到您的设备中.
                </div>
                <div v-else>
                  您的稿件自确认接收已超过30天期限, 无法为您再次提供下载服务.
                </div>
                  <img v-if="!currentTask.slider" src="@/assets/image/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                  <img class="slider-icon-up" v-else src="@/assets/image/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                </div>
                <div class="keywords-version" v-show="!currentTask.slider">
                  <div class="keywords-item" v-for="(item, index) in currentTask.keywordList" :key="index">
                    <template v-if="item.status == 2 || item.status == 1 || item.status == 3 ">
                      <p class="keywords-item-time">
                      关键词提交于
                      {{ item?.time && format(item.time, "yy.MM.dd - HH:mm:ss") }}
                      <span v-if="item.status === 2">| 平台驳回于
                      {{item.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss") }}</span> 
                      <span v-if="item.status === 3">
                        | 审核通过于
                      {{ item?.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss") }}
                      </span>
                    </p>
                    <div class="keywords-item-info">
                      <p class="keywords-item-text mt-12">
                        <template v-if="item.status === 2">
                          <div class="edit-color">
                        驳回原因：
                      <p>{{ item.rejectReason }}</p>
                    </div>
                      原关键词：
                    </template>
                      <p>{{ item.keyword }}</p>
                      </p>
                    </div>
                    </template>
                  <template v-if="item.status == 7">
                    <p class="keywords-item-time">
                      修改意见提交于
                      {{ item.rejectTime && format(item.rejectTime, "yy.MM.dd- HH:mm:ss") }}
                    </p>
                    <div class="keywords-item-info">
                      <p class="scrollbar-class keywords-item-text mt-12" v-html="item.rejectReason"></p>
                    </div>
                  </template>
                  <template v-if="item.status == 5">
                    <p class="keywords-item-time complete-blue-color">
                      <span v-if="currentTask.status === '已完成'">稿件</span>
                      完成于 {{item.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss")}}
                    </p>
                    <div class="keywords-item-info keywords-item-can-click" @click="handleGotoPreview">
                      <p class="keywords-item-text mt-12 keywords-item-text-downe">
                        <el-icon>
                          <Document />
                        </el-icon>
                        {{currentTask.keyword.slice(0, 12)}}<span v-if="currentTask.endTime">{{ currentTask.endTime }}</span>
                      </p>
                      <div class="process-content-time complete-blue-color">
                        Ver.{{ item.manuscriptNum }}
  
                      </div>
                    </div>
                  </template>
                  </div>
                </div>
              </div>
              <!-- 稿件修改中 -->
              <div class="process-content-info" v-if="currentTask.status === '稿件修改中'">
                <div class="process-content-title" @click="currentTask.slider = !currentTask.slider">
                  <span>已收到您的意见, 编辑们将尽快为您修改稿件.</span>
                  <img v-if="!currentTask.slider" src="@/assets/image/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                  <img class="slider-icon-up" v-else src="@/assets/image/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                </div>
                <div class="keywords-version" v-show="!currentTask.slider">
                  <div class="keywords-item" v-for="(item, index) in currentTask.keywordList" :key="index">
                    <template v-if="item.status == 2 || item.status == 1 || item.status == 3 ">
                      <p class="keywords-item-time">
                      关键词提交于
                      {{ item?.time && format(item.time, "yy.MM.dd - HH:mm:ss") }}
                      <span v-if="item.status === 2">| 平台驳回于
                      {{item.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss") }}</span> 
                      <span v-if="item.status === 3">
                        | 审核通过于
                      {{ item?.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss") }}
                      </span>
                    </p>
                    <div class="keywords-item-info">
                      <p class="keywords-item-text mt-12">
                        <template v-if="item.status === 2">
                          <div class="edit-color">
                        驳回原因：
                      <p>{{ item.rejectReason }}</p>
                    </div>
                      原关键词：
                    </template>
                      <p>{{ item.keyword }}</p>
                      </p>
                    </div>
                    </template>
                  <template v-if="item.status == 7">
                    <p class="keywords-item-time">
                      修改意见提交于
                      {{ item.rejectTime && format(item.rejectTime, "yy.MM.dd- HH:mm:ss") }}
                    </p>
                    <div class="keywords-item-info">
                      <p class="scrollbar-class keywords-item-text mt-12" v-html="item.rejectReason"></p>
                    </div>
                  </template>
                  <template v-if="item.status == 5">
                    <p class="keywords-item-time complete-blue-color">
                      <span v-if="currentTask.status === '已完成'">稿件</span>
                      完成于 {{item.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss")}}
                    </p>
                    <div class="keywords-item-info keywords-item-can-click" @click="handleGotoPreview">
                      <p class="keywords-item-text mt-12 keywords-item-text-downe">
                        <el-icon>
                          <Document />
                        </el-icon>
                        {{currentTask.keyword.slice(0, 12)}}<span v-if="currentTask.endTime">{{ currentTask.endTime }}</span>
                      </p>
                      <div class="process-content-time complete-blue-color">
                        Ver.{{ item.manuscriptNum }}
  
                      </div>
                    </div>
                  </template>
                  </div>
                  <div class="keywords-item">
                    <p class="keywords-item-time">
                      新版稿件撰写中
                    </p>
                    <div class="keywords-item-info">
                      <p class="keywords-item-text mt-12">
                        <el-icon>
                          <Document />
                        </el-icon>
                        稿件撰写中
                      </p>
                      <div class="process-content-time">
                        Ver.{{ currentTask.keywordList.filter(item => item.status === 5).length + 1 }}
  
                      </div>
                    </div>
  
                  </div>
                </div>
              </div>
              <!-- 已取消 -->
              <div class="process-content-info" v-if="currentTask.status === '已取消'">
                <div class="process-content-title" @click="currentTask.slider = !currentTask.slider">
                  <span>该任务已取消.</span>
                  <img v-if="!currentTask.slider" src="@/assets/image/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                  <img class="slider-icon-up" v-else src="@/assets/image/mine/icon／missiondetail／arraw／black@2x.png" alt="">
                </div>
                <div class="keywords-version" v-show="!currentTask.slider">
                  <div class="keywords-item" v-for="(item, index) in currentTask.keywordList" :key="index">
                    <template v-if="item.status == 2 || item.status == 1 || item.status == 3 ">
                      <p class="keywords-item-time">
                      关键词提交于
                      {{ item?.time && format(item.time, "yy.MM.dd - HH:mm:ss") }}
                      <span v-if="item.status === 2">| 平台驳回于
                      {{item.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss") }}</span> 
                      <span v-if="item.status === 3">
                        | 审核通过于
                      {{ item?.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss") }}
                      </span>
                    </p>
                    <div class="keywords-item-info">
                      <p class="keywords-item-text mt-12">
                        <template v-if="item.status === 2">
                          <div class="edit-color">
                        驳回原因：
                      <p>{{ item.rejectReason }}</p>
                    </div>
                      原关键词：
                    </template>
                      <p>{{ item.keyword }}</p>
                      </p>
                    </div>
                    </template>
                  <template v-if="item.status == 7">
                    <p class="keywords-item-time">
                      修改意见提交于
                      {{ item.rejectTime && format(item.rejectTime, "yy.MM.dd- HH:mm:ss") }}
                    </p>
                    <div class="keywords-item-info">
                      <p class="scrollbar-class keywords-item-text mt-12" v-html="item.rejectReason"></p>
                    </div>
                  </template>
                  <template v-if="item.status == 5">
                    <p class="keywords-item-time complete-blue-color">
                      <span v-if="currentTask.manuscriptList?.length === 1 || currentTask.status === '已完成'">稿件</span>
                      完成于 {{item.rejectTime && format(item.rejectTime, "yy.MM.dd - HH:mm:ss")}}
                    </p>
                    <div class="keywords-item-info keywords-item-can-click" @click="handleGotoPreview">
                      <p class="keywords-item-text mt-12 keywords-item-text-downe">
                        <el-icon>
                          <Document />
                        </el-icon>
                        {{currentTask.keyword.slice(0, 12)}}<span v-if="currentTask.endTime">{{ currentTask.endTime }}</span>
                      </p>
                      <div class="process-content-time complete-blue-color">
                        Ver.{{ item.manuscriptNum }}
  
                      </div>
                    </div>
                  </template>
                  </div>
                </div>
              </div>
              <!-- 创建任务 -->
              <div class="commit-button" v-if="willDo.includes(currentTask.status) && currentTask.status !== '待确认'">
                <div class="normal-button" v-if="createFormButton === 'normal'" @click="handelCreateTask">
                </div>
                <div class="forbidden-button" v-if="createFormButton === 'forbidden'">
                </div>
              </div>
              <div class="commit-button-forbidden" v-if="currentTask.status === '撰写中' || currentTask.status === '稿件修改中'">
                <img src="@/assets/image/mine/button／confirmManuscript／forbid@2x.png" alt="" />
              </div>
              <div @click="handleGotoPreview" class="commit-button-willconfirm" v-if="currentTask.status === '待确认'">
              </div>
              <div @click="handleDownLoad" class="downLoad-commit-button"
                v-if="currentTask.status === '已完成' && singleDemandStatus(currentTask) === 'icon-status-doing'">
                <!-- <img src="@/assets/image/mine/button／downloadOne／normal@2x.png" alt="" /> -->

              </div>
              <!-- 创建任务时用户须知 -->
              <div class="notes-for-user" v-if="processList[0].includes(currentTask.status) || currentTask.status === '未补充已过期'">
                <template v-if="activeDemand.cycle === '日交'">
                <p>用户须知 (日交任务)</p>
                <p>· 在创建补充关键词时, 建议您从最近的可选日期开始创建, 以避免对收稿时间产生预期之外的影响.</p>
                <p>
                  · 日交任务的关键词必须在任务对应交稿日至少前1天完成补充; 交稿日当天不可填写或修改关键词.
                </p>
                <p>
                  · 若任务未提供任何关键词 (截至交稿日前1天23:59:59)，则视为用户主动放弃此次交稿服务.
                </p>
                <p>
                  · 关键词提交审核后不能进行修改. 关键词描述越丰富、越准确，小编撰写的文章质量越高哦
                </p>
              </template>
              <template v-else>
                <p>用户须知 (周交任务)</p>
                <p>· 在创建补充关键词时, 建议您从最近的可选日期开始创建, 以避免对收稿时间产生预期之外的影响.</p>
                <p>
                  · 周交任务中的关键词须在任务周期开始的前1天完成补充; 周交任务开始后不可填写或修改关键词.
                </p>
                <p>
                  · 若周交任务未提供任何关键词 (截至任务周期开始前1天23:59:59)，则视为用户主动放弃此次交稿服务.
                </p>
                <p>
                  · 关键词提交审核后不能进行修改. 关键词描述越丰富、越准确，小编撰写的文章质量越高哦
                </p>
              </template>
              </div>
              <!-- 确认稿件时用户须知 -->
              <div class="notes-for-user" v-if="currentTask.status === '待确认' || currentTask.status === '稿件修改中'">
                <p>温馨提示</p>
                <p>· 若您觉得稿件符合要求, 可点击上方蓝色按钮确认接收稿件.</p>
                <p>
                  · 确认接收稿件之前, 您可以查看/预览稿件.
                </p>
                <p>
                  · 每个版本的稿件在确认任务接收后的30天内都可以进行预览.
                </p>
                <p>
                  · 若您连续XX天未操作待确认稿件 (即提交任意修改请求)，则系统将自动确认收稿.
                </p>
                <p></p>
              </div>
              <!-- 已完成时用户须知 -->
              <div class="notes-for-user" v-if="currentTask.status === '已完成'">
                <p>用户须知</p>
                <p>· 30天内(自确认接收时刻起), 您可以下载最新版本稿件至您的设备中.</p>
                <p>
                  · 30天内(自确认接收时刻起), 您可以在平台上预览任意版本的稿件内容.
                </p>
                <p>
                  · 30天后(自确认接收时刻起), 您的稿件将从平台服务器上移除. 请合理规划以避免不必要的损失.
                </p>
                <p></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <div class="no-demand" v-else>
      <img width="249px" height="302px" src="@/assets/image/mine/empty state@2x.png" alt="">
    </div>
    </div>
    <contribution :taskList="downLoadList" @refresh="qeuryDemandList" v-if="digdog" @close="digdog = false" :type="parentMessage"></contribution>
  </div>
  <diaologBox :confirmText="diaologInfo.confirmText" @setLoading="setLoading" :loading="addLoading" ref="confirmDiaolog" @confirm="diaologInfo.confirmDiaolog">
    <template #title>{{ diaologInfo.title }}</template>
    <span v-html="diaologInfo.text"></span>
  </diaologBox>
  <weekDiaolog ref="weekDiaologRef" @confirm="confirmWeekDiaolog">
    <template #title>
      <div class="mine-week-diaolog-container-pay-box">
        <div class="title">任务异常提醒</div>
        <p>您可以点击页面其他区域暂时关闭此提醒.</p>
        <div class="slider"></div>
  </div>
    </template>
    <p>您当前余额已不足支持推进新的撰写任务. <br/>
为了避免对任务进度产生影响, 请记得及时为您的账户充值.</p>
  </weekDiaolog>
    <!-- 底部开始 -->
    <HomeFooter v-if="!demandTabInfo.length"></HomeFooter>
    <!-- 底部结束 -->
</template>


<script lang="ts" setup>
import HomeHeader from "@/components/homePage/header/index.vue";
import HomeFooter from "@/components/homePage/footer/index.vue";
import contribution from "@/components/mine/contribution.vue";
import { useStore } from "@/store/index";
const store = useStore();
import EventBus from "@/utils/eventBus.js";
import { getUsrInfo, code,ChangePassword,changeinformation,uploadImg, queryOrderList, records, queryDemandList, queryTaskList, checkBalance, addTask, keyWordsList, updateTask } from "@/utils/api/customerService/index";
import {
  CirclePlus,
  Filter,
  Calendar,
  RemoveFilled,
  Search,
  Document
} from "@element-plus/icons-vue";
import { ref, onMounted, shallowRef, onBeforeUnmount } from "vue";
import { format, add, startOfWeek, subDays } from "date-fns";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
import preFixImg from '@/assets/image/mine/icon／clock／black@2x.png';
import preFixImgWeek from '@/assets/image/mine/icon／calendar／black@2x.png';
import diaologBox from "@/components/mine/diaolog.vue";
import weekDiaolog from "@/components/mine/weekDiaolog.vue";
import diaologToScroll from '@/components/mine/diaologToScroll.vue';
import JSZip from 'jszip';
// import { saveAs } from 'file-saver';
import FileSaver from 'file-saver';  
const { saveAs } = FileSaver;

const route = useRoute();
const reChooseTask = async() => {
    let curDemandTemp = demandTabInfo.value.find(item => item.demandId == history.state.demandId);
    if (curDemandTemp) {
      await handleClickTab(curDemandTemp);
      let curTaskTemp = activeDemand.value.taskList.find(item => item.id == history.state.taskId);
      if (curTaskTemp) {
        handleClickTask(curTaskTemp);
      }
    }
}

const filterIshow = ref({
  status: false,
  time: false
})
const filterTimepickerPopRef = ref(null);
const filterStatuspickerPopRef = ref(null);
const setLoading = (flag) => {
  addLoading.value = flag;
}
let currentTaskPage = {
  page: 1,
  num: 10
}
const statusMap = {
  1: "关键词审核中",
  2: "待修改",
  3: "撰写中",
  4: "撰写中",
  5: "待确认",
  6: "撰写中",
  7: "稿件修改中",
  8: "已完成",
  0: "待补充",
}
const valuedatarili = ref([])
const currentDate = ref(new Date().toLocaleDateString());  
// 计算去年的今天的日期  
const lastYearToday = computed(() => {  
  const today = new Date();  
  const lastYear = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate());  
  return lastYear.toLocaleDateString();  
}); 
valuedatarili.value = [lastYearToday.value, currentDate.value];  
// const [year, month, day] = currentDate._value.split('/');  
// const [year1, month1, day1] = lastYearToday._value.split('/');  
// const monthIndex = parseInt(month, 10) - 1;  
// const monthIndex1 = parseInt(month1, 10) - 1;  
// console.log(currentDate._value,lastYearToday.value,'顶顶顶')
const diaologInfo = reactive({
  title:'',
  text:''
})
const filterTimepickerRef = ref(null)
const weekDiaologRef = ref(null);
const confirmDiaolog = ref(null)
const keyWordsMin = 10;
const dialogdemloes = ref(false);
const settingitem = ref(0);
const codeyan = ref("获取验证码");
const isPasswordVisible = ref(false);
const togglePasswordVisibility = () => {
	isPasswordVisible.value = !isPasswordVisible.value;
}
const settingList = ["我的账号", "修改密码", "退出登录"];
const gosettingitem = (a) => {
  settingitem.value = a;
};
const tradeList = [{
  name: "全部",
  value: 0
},
{
  name: "充值",
  value: 1
},
{
  name: "支出",
  value: 3
}];
const processList = [
  ["待补充", "未补充已过期"], ["关键词审核中", "待修改"], ["撰写中"], ["待确认", "稿件修改中"], ['已完成']
];
const DatePickerPrefix = shallowRef({
  render() {
    return h('img', {'src': preFixImg, 'class': 'prefix-icon', 'width': '16px', 'height': '16px'})
  },
});
const DatePickerPrefixWeek = shallowRef({
  render() {
    return h('img', {'src': preFixImgWeek, 'class': 'prefix-icon', 'width': '16px', 'height': '16px'})
  },
});
  const  nicknames = ref('')
  const typeMap = {
    1: "账户充值",
    2: "后台充值",
    3: "任务扣费",
    4: "后台扣除",
    5: '任务退回'
  }
  const radeOrderList = ref([])
  const initUserInfo = () => {
    getUsrInfo().then(res => {
        let data = JSON.parse(res.data.value || '{}').result;
        store.setUserInfo(data);
            nicknames.value = store.userInfo.nickname
            setImage.value = store.userInfo?.headimage
        localStorage.setItem("aiseo-user-info",JSON.stringify(data) );
      });
  }
  const handleChangeVisible = (visible) => {
    if(visible){
      initUserInfo()
    }
  }
onMounted(() => {
  if (process.client) {
    document.addEventListener("visibilitychange", handleChangeVisible);
    nextTick(() => {
      initUserInfo();
      qeuryDemandList(true);//true表示刷新页面时
    });
  }
}); 
onBeforeUnmount(() => {
  document.removeEventListener("visibilitychange", handleChangeVisible);
});
// 搜索相关
const taskFilterForm = ref({
  searchText: "",
  taskList:[],
  timeFilter:''
});
const resetSearchForm = () => {
  taskFilterForm.value = {
  searchText: "",
  taskList:[],
  timeFilter:''
}
currentTaskPage.page = 1;
}
const taskFilterList = ref([
  {
    title:'待处理任务',
    num: 12,
    isSelect: false,
    value: '2,5,0',
  },
  {
    title:'进行中任务',
    num: 12,
    isSelect: false,
    value: '1,3,4,7'
  },
  {
    title:'已结束任务',
    num: 12,
    isSelect: false,
    value: '8'
  }
])
const goplay = () => {
  store.setdialogVisible(true);
};
const tradRef = ref(null)
const goTrade = () => {
  Trade.value = true;
  orderPage.page = 1;
  radeOrderList.value = [];
  tradeitem.value = 0;
  valuedatarili.value = [lastYearToday.value, currentDate.value];  
  // 请求交易记录接口
  queryOrderListData();
}
const tradeLoading = ref(false)
const orderPage = {
  page: 1,
  limit: 10,
  total:0
}
const orderRef = ref(null)
const queryOrderListData = () => {
  tradeLoading.value = true
  records({
    way_in: tradeitem.value ? tradeitem.value : null,
    pay_time_start: valuedatarili.value[0] + ' 00:00:00',
    pay_time_end: valuedatarili.value[1] +' 23:59:59',
    ...orderPage
  }).then(res => {
        let resData = JSON.parse(res.data.value || '{}')
        radeOrderList.value = radeOrderList.value.concat((resData.result?.data || []).map(ii => {
          return {
            ...ii,
            ...ii.order_show,
            id: ii.id,
            balance_after_transaction: ii.balance_after_transaction,
            pay_type: ii.pay_type
          }
        }));
        orderPage.total = resData.result?.total || 0
        tradeLoading.value = false
  })
  // queryOrderList({
  //   type: tradeitem.value ? tradeitem.value : null,
  //   pay_time_start: valuedatarili.value[0] + ' 00:00:00',
  //   pay_time_end: valuedatarili.value[1] +' 23:59:59',
  // }).then(res => {
  //   let resData = JSON.parse(res.data.value || '{}')
  //   radeOrderList.value = resData.result?.data || [];
  //   tradeLoading.value = false
  // })
}
const handleScrollTrade = () => {
  if(radeOrderList.value.length < orderPage.total){
    orderPage.page += 1
    queryOrderListData()
  }
  
}
const demandTabInfo = ref([
]);
const activeDemand = ref({});
const currentTask = ref(demandTabInfo.value[0]?.taskList?.[0] || []);
const initTask = {
  taskId: "",
  status: "待补充",
  page: "1",
  estimatedTime: add(new Date(), { days: 1 }),
  keyword: "",
  createTaskType: "single",
  estimatedTimeList: []
};
// 创建任务表单
const createTaskForm = ref({
  taskId: "",
  status: "待补充",
  page: "1",
  estimatedTime: "YY-MM-DD",
  keyword: "",
  createTaskType: "single",
  estimatedTimeList:[]
});
const createFormButton = computed(() => {
  if(createTaskForm.value.createTaskType === 'single'){
    let len = createTaskForm.value.keyword.length;
    if (currentTask.value.status === '待修改') {
      len = currentTask.value?.keywordEdit?.length || 0;
    }
    if(len > keyWordsMin){
      return 'normal'
    }else{
      return 'forbidden'
    }
  }else{
    if(createTaskForm.value.estimatedTimeList.some(dd => dd.keyword.length > keyWordsMin)){
      return 'normal'
    }else{
      return 'forbidden'
    }
  }
})
const resetTaskForm = () => {
  createTaskForm.value = {
  taskId: "",
  status: "待补充",
  page: "1",
  estimatedTime: "YY-MM-DD",
  keyword: "",
  createTaskType: "single",
  estimatedTimeList:[]
};
}
const handleCreateTask = () => {
  resetTaskForm();
}
const computedPassKeyWord = computed(() => {
  return (currentTask.value?.keywordList || []).find((item) => {
    return item.passTime;
  });
})
const openFile = () => {
  if (!activeDemand.value.annex_url.src) return;
  window.open(activeDemand.value.annex_url.src);
}
const handleClickTab = item => {
  resetFilter();
  return new Promise((resolve, reject) => {
  // 获取需求详情
  queryDemandList({
    demand_id: item.demandId
  }).then(async(res) => {
    let resData = JSON.parse(res.data.value || '{}');
    if (resData.code === 200) {
      let curDemand = resData.result.data[0] || {};
      activeDemand.value = Object.assign({}, item);
      activeDemand.value.keyword_id = curDemand.keyword_id;
      let annex_url = curDemand.annex_url?.trim()
      if(annex_url){
        try{
          annex_url = JSON.parse(annex_url)
        }catch{
          annex_url = {
            src: annex_url,
            name: '文件'
          }
        }
      }
      activeDemand.value.annex_url = annex_url;
      activeDemand.value.delivered = curDemand.num_ok;
      activeDemand.value.unDown = curDemand.num_pick;
      activeDemand.value.descripttion = curDemand.descript;
      activeDemand.value.lastTime = curDemand.latest_delivery_time;
      resetSearchForm();
      await queryTaskListInfo(item.demandId)//获取任务列表；
      resolve();
    }else{
      demandTabInfo.value = []
    }
    
  })
  })
};
const processListRef = ref(null);
const handleClickTask = (item, flag) => {
  if (item) {
    currentTask.value = item;
    createTaskForm.value = Object.assign({}, {...item,estimatedTimeList:[], createTaskType: "single"});
    if(item.status !== '待补充'){
    // 获取当前KeywordsList
    keyWordsList({
    keyword_id: +item.taskId,
  }).then(res => {  
    let resData = JSON.parse(res.data.value || '{}');
    if (resData.code === 200) {
      let manuscriptNum = (resData.result.data || []).filter(ii => ii.status == 5).length;
      currentTask.value.keywordList = resData.result.data.map(ii => {
        let endTime = ''
        if (ii.end_time && ii.end_time=='9999999999') {
          endTime = '长期'
        }
        if (ii.end_time) {
          endTime = format(new Date(ii.endTime * 1000), "yyyy-MM-dd HH:mm:ss")
        }
        let res = {
          ...ii,
          time: ii.keyword_time && format(new Date(ii.keyword_time * 1000), "yyyy-MM-dd HH:mm:ss"),
          keyword: ii.keyword,
          rejectReason: ii.detailed,
          rejectTime: ii.create_time,
          endTime,
        }
        if(ii.status == 5){
          res.manuscriptNum = manuscriptNum;
          manuscriptNum--
        }
        return res
      }).reverse();
      nextTick(() => {
          // 滚动条到最底部
          processListRef.value.scrollTop = processListRef.value.scrollHeight;
      })
    }

  })
    }
  } else {
    if(activeDemand.value.type === "单次任务" && alltaskTime.value?.length){
      //判断是否为过滤条件
      if(flag){
        EventBus.emit("openToastBox", ["单次任务只能有一个任务"]);
      }
      return;
    }
    
    createTaskForm.value = Object.assign({}, initTask);
    if (activeDemand.value.cycle === "周交") {
      // 判断周期开始时间-如果今天大于周期开始时间，则取今天，否则取周期开始时间
      let startWeekTime = new Date() > new Date(activeDemand.value.start_time) ? new Date() : new Date(activeDemand.value.start_time);
      const startOfThisWeek = startOfWeek(startWeekTime, { weekStartsOn: 1 });
      createTaskForm.value.estimatedTime = add(startOfThisWeek, { weeks: 1 });
      createTaskForm.value.estimatedTimeList = [
        {
          time: createTaskForm.value.estimatedTime,
          keyword: ""
        },
      ];
      // 如果第二周大于周交结束时间则不需要第二条
      if (new Date(add(createTaskForm.value.estimatedTime, { weeks: 1 })) <= new Date(activeDemand.value.end_time)) {
        createTaskForm.value.estimatedTimeList.push({
          time: add(createTaskForm.value.estimatedTime, { weeks: 1 }),
          keyword: ""
        })
      }
    } else {
      if(activeDemand.value.type === '单次任务'){
          createTaskForm.value.estimatedTime = activeDemand.value.start_time;
      }else{
        // 判断周期开始时间-如果今天大于周期开始时间，则取今天，否则取周期开始时间
        let startDayTime = new Date() > new Date(activeDemand.value.start_time) ? new Date() : new Date(activeDemand.value.start_time);
        createTaskForm.value.estimatedTime = add(startDayTime, { days: 1 });
      }
      createTaskForm.value.estimatedTimeList = [
        {
          time: createTaskForm.value.estimatedTime,
          keyword: ""
        }
      ];
            // 如果第二天大于日交结束时间则不需要第二条
            if (new Date(add(new Date(), { days: 1 })) <= new Date(activeDemand.value.end_time)) {
                createTaskForm.value.estimatedTimeList.push({
                  time: add(new Date(), { days: 1 }),
                  keyword: ""
                })
            }
    }
    currentTask.value = createTaskForm.value;
  }
};
const willDo = ["待补充", "待修改", "待确认"];
const doing = ["稿件修改中", "撰写中", "关键词审核中", "已完成"];
const fixUserPasswordForm = ref({
  mobile: store.userInfo?.mobile,
  mobile_code:"",
  password: "",
})
const codexieyi = ref(true);
let getCodeisWaiting = ref(false);
// 获取验证码
let Timer = e => {};
const sendcodetel = () => {
	if (getCodeisWaiting.value) return;
  	codeyan.value = '发送中'
    	getCodeisWaiting.value = true;
	code({
		mobile: store.userInfo?.mobile
	}).then((res) => {
		const resData = JSON.parse(res.data.value);
		if (resData.code == 200) {
			EventBus.emit("openToastBox", ["验证码发送成功！"]);
		} else {
			EventBus.emit("openToastBox", [resData.message]);
		}
	});
	setTimer();
}
const setTimer = e => {
  let holdTime = ref(59);
  codeyan.value = "重新获取(60)";
  Timer = setInterval(() => {
    if (holdTime.value <= 0) {
      getCodeisWaiting.value = false;
      codeyan.value = "获取验证码";
      clearInterval(Timer);
      return;
    }
    codeyan.value = "重新获取(" + holdTime.value + ")";
    holdTime.value--;
  }, 1000);
};

const sureopens = () => {

  if(settingitem.value==0){
    if(!nicknames.value){
      return EventBus.emit("openToastBox", ['昵称不能为空！'])
    }
     let data = {
    nickname:nicknames.value,
    headimage:setImage.value
  }
  
      changeinformation(data).then((res)=>{
      		const resData = JSON.parse(res.data.value);
           if(resData.code == 400){
           EventBus.emit("openToastBox", [resData.message])
        }else if(resData.code == 200){
            EventBus.emit("openToastBox", ['您已修改成功'])
            sttingType.value = false
            resetfixUserPasswordForm()
      initUserInfo()
        }
    })
  }
  if(settingitem.value ==1){
    if (!fixUserPasswordForm.value?.mobile_code) {
      EventBus.emit("openToastBox", [' 请输入验证码'])
      return
    }
    if (!fixUserPasswordForm.value?.password) {
      EventBus.emit("openToastBox", [' 请输入新密码'])
      return
    }
    fixUserPasswordForm.value.mobile = store.userInfo.mobile
        ChangePassword(fixUserPasswordForm.value).then((res) => {
				const resData = JSON.parse(res.data.value);
        if(resData.code == 400){
           EventBus.emit("openToastBox", [resData.message])
        }else if(resData.code == 200){
            EventBus.emit("openToastBox", ['您已修改成功，请重新登录'])
            sttingType.value = false
            resetfixUserPasswordForm()
        }
		 })
  }
  // if(settingitem.value ==2){
  //    sttingType.value = false
  // }
 
}
const resetfixUserPasswordForm = () => {
  fixUserPasswordForm.value.mobile_code = "";
  fixUserPasswordForm.value.password = "";
}
const upLoadImgs = (file) => {
  return new Promise((resolve, reject) => {
    let formData = new FormData();
    formData.append("file", file);
    const isLt = file.size / 1024;
    if (isLt > 300) {
      // ElNotification({
      //   title: "发送失败",
      //   message: "上传文件大小不能超过 300KB!",
      //   type: "warning",
      // });
      EventBus.emit('openToastBox', ["上传文件大小不能超过 300KB！"])
      reject("文件过大");
      return false;
    }
    uploadImg(formData)
      .then((res) => {
        resolve(res);
      })
      .catch(() => {
        reject();
      });
  });
};
const setImage = ref('')
const chooseImg = (role) => {
  let input = document.createElement("input");
  input.setAttribute("type", "file");
  input.accept = "image/*";
  input.addEventListener("change", async (e) => {
    let file = e.currentTarget.files[0]; // 获取选择的文件（这里假设用户只选择了一个文件）
    if (file) {
      upLoadImgs(file)
        .then((resData) => {
          let res = JSON.parse(resData.data.value);
          if (res?.code === 200) {
           const runtimeInfo = useRuntimeConfig() 
            let baseURL = runtimeInfo.public.fileUploadUrl
            let imgSrc = baseURL + res?.src;
            setImage.value = imgSrc
            // let image = {
            //   headimage:imgSrc,
            //   balance:store.userInfo.balance,
            //   nickname:store.userInfo.nickname,
            //   mobile:store.userInfo.mobile, 
            // }
            // store.setUserInfo(image)
          } else {
            EventBus.emit('openToastBox', ["发送失败！"]);
          }
        })
        .catch((error) => {
          if (error !== "文件过大") {
            EventBus.emit('openToastBox', ["发送失败！"]);
          }
        });
    }
  });
  input.click(); // 打开文件选择窗口
};
const goout = () => {
     localStorage.removeItem('aiseo-token-info')
     localStorage.removeItem('aiseo-user-info')
     router.push('/login')
}
// 计算单个任务icon颜色
const singleDemandStatus = item => {
  if (willDo.includes(item.status)) {
    return "icon-status-will-do";
  } else if (doing.includes(item.status)) {
    if (item.status === "已完成" && item.completionTime) {
      let days =
        (new Date() - new Date(item.completionTime)) / (1000 * 3600 * 24);
      if (days > 30) {
        return "icon-status-done";
      } else {
        return "icon-status-doing";
      }
    } else {
      return "icon-status-doing";
    }
  }else if(item.status === '未补充已过期'){
    return "icon-status-done";
  }
};
// 计算单个需求icon颜色
const demandStatus = item => {
  if (
    !item?.taskList?.length ||
    item.taskList.findIndex(item => willDo.includes(item.status)) > -1
  ) {
    return "icon-status-will-do";
  }
  let isDone = item.taskList.every(item => {
    return (
      item.status === "已完成" &&
      item.completionTime &&
      (new Date() - new Date(item.completionTime)) / (1000 * 3600 * 24) > 30
    );
  });
  if (isDone) {
    return "icon-status-done";
  } else {
    return "icon-status-doing";
  }
};
const digdog = ref(false);
const parentMessage = ref(null); // 父组件的数据
const downLoadList = ref([]);
const gocontributton = (e, num) => {
  if (!num) return
  downLoadList.value = []
  parentMessage.value = e;
  digdog.value = true;
  // let endTime = new Date()
  // let startTime = subDays(new Date(), 60)
  let parmas = {
    demand_id: activeDemand.value.demandId,
    page: 1,
    num: 1000,
    status_in: "8",
    // end_start_time: format(startTime, "yyyy-MM-dd 00:00:00"),
    // end_end_time: format(endTime, "yyyy-MM-dd 23:59:59")
  }
  if (e === 2) {
    parmas.is_download = 2;
  }
  // 请求接口
  queryTaskList(parmas).then(res => {
    let resData = JSON.parse(res.data.value || '{}');
    if (resData.code === 200) {
      downLoadList.value = [...downLoadList.value, ...(resData.result?.data || []).map(dd => {
          let status = statusMap[dd.status] || '';
          let keyword = dd.keyword === ' ' ? '' : dd.keyword
        if (status === '待补充' && new Date() > new Date(dd.start_time * 1000)) {
          status = '未补充已过期';
          keyword = '未及时添加关键词, 此任务已过期'
        }
        if (dd.status == 0 && keyword) {
          status = '已取消'
        }
        return {
          ...dd,
          keyword: keyword,
          taskId: dd.id,
          status: status,
          page: "1",
          estimatedTime: format(+(dd.start_time + '000'), "yyyy-MM-dd"),
          keywordList: [],
          versionNum: 1,
          manuscriptList:[],
          endTime: format(+(dd.end_time + '000'), "yyyy-MM-dd"),
        }
      })]
      console.log(downLoadList.value);
      
    }
  })
};
const initMutipDate = () => {
  if (activeDemand.value.cycle === "周交") {
      // 判断周期开始时间-如果今天大于周期开始时间，则取今天，否则取周期开始时间
      let startWeekTime = new Date() > new Date(activeDemand.value.start_time) ? new Date() : new Date(activeDemand.value.start_time);
      const startOfThisWeek = startOfWeek(startWeekTime, { weekStartsOn: 1 });
      createTaskForm.value.estimatedTime = add(startOfThisWeek, { weeks: 1 });
      createTaskForm.value.estimatedTimeList = [
        {
          time: createTaskForm.value.estimatedTime,
          keyword: ""
        },
      ];
      // 如果第二周大于周交结束时间则不需要第二条
      if (new Date(add(createTaskForm.value.estimatedTime, { weeks: 1 })) <= new Date(activeDemand.value.end_time)) {
        createTaskForm.value.estimatedTimeList.push({
          time: add(createTaskForm.value.estimatedTime, { weeks: 1 }),
          keyword: ""
        })
      }
    } else {
// 判断周期开始时间-如果今天大于周期开始时间，则取今天，否则取周期开始时间
let startDayTime = new Date() > new Date(activeDemand.value.start_time) ? new Date() : new Date(activeDemand.value.start_time);
        createTaskForm.value.estimatedTime = add(startDayTime, { days: 1 });
        createTaskForm.value.estimatedTimeList = [
        {
          time: createTaskForm.value.estimatedTime,
          keyword: ""
        }
      ];
            // 如果第二天大于日交结束时间则不需要第二条
            if (new Date(add(new Date(createTaskForm.value.estimatedTime), { days: 1 })) <= new Date(activeDemand.value.end_time)) {
                createTaskForm.value.estimatedTimeList.push({
                  time: add(new Date(createTaskForm.value.estimatedTime), { days: 1 }),
                  keyword: ""
                })
            }
    }
}
const confirmCreateTask = () => {
  createTaskForm.value.estimatedTimeList.pop();
  confirmDiaolog.value.settingVisible(false);
  EventBus.emit("openToastBox", ["已确认操作"]);
}
const handleRemoveTime = () => {
  if (createTaskForm.value.estimatedTimeList[createTaskForm.value.estimatedTimeList.length - 1].keyword.length > 0) {
    diaologInfo.title = "确认要继续操作吗?";
    diaologInfo.confirmText = "确认"
    diaologInfo.text = "您已经进行了填写.<br/>若您执意要继续, 此部分已编辑内容将丢失请确认操作.";
    diaologInfo.confirmDiaolog = confirmCreateTask
    confirmDiaolog.value.settingVisible()
  }else{
  createTaskForm.value.estimatedTimeList.pop();
  }
};
const handleChangeType = (flag) => {
  if(createTaskForm.value.createTaskType === 'multiple' && createTaskForm.value.estimatedTimeList.some(dd => dd.keyword.length)){
    diaologInfo.title = "确认要继续操作吗?";
    diaologInfo.confirmText = "确认"
    diaologInfo.text = "您已经进行了填写.<br/>若您执意要继续, 此部分已编辑内容将丢失请确认操作.";
    diaologInfo.confirmDiaolog = () => {
      createTaskForm.value.createTaskType = flag;
      initMutipDate();
      confirmDiaolog.value.settingVisible(false);
      EventBus.emit("openToastBox", ["已确认操作"]);
    }
    confirmDiaolog.value.settingVisible()
  }else{
    createTaskForm.value.createTaskType = flag;
    initMutipDate()
  }
}
const resetCreateTaskForm = () => {
    createTaskForm.value = {
    taskId: "",
    status: "待补充",
    page: "1",
    estimatedTime: "YY-MM-DD",
    keyword: "",
    createTaskType: "single",
    estimatedTimeList:[]
  }
  // if (activeDemand.value.cycle === "周交") {
  //   const startOfThisWeek = startOfWeek(new Date(), { weekStartsOn: 1 });
  //   createTaskForm.value.estimatedTime = add(startOfThisWeek, { weeks: 1 });
  // }else{
  //   if(activeDemand.value.type === '单次任务'){
  //     createTaskForm.value.estimatedTime = activeDemand.value.start_time;
  //   }else{
  //     createTaskForm.value.estimatedTime = add(new Date(), { days: 1 });
  //   }
  // }
}
const confirmWeekDiaolog = () => {
  weekDiaologRef.value.settingVisible(false);
  // 前往充值页面
  goplay()
}
const handelCreateTask = () => {
  if (currentTask.value.status === "待补充") {
    // 前端校验余额是否充足

  // 后端校验余额是否充足
  let num = 1;
  if (createTaskForm.value.createTaskType === 'multiple') {
    num = createTaskForm.value.estimatedTimeList?.length || 0;
  }
  checkBalance({
    demand_id: activeDemand.value.demandId,
    num
  }).then(resCheck => {
    let resData = JSON.parse(resCheck.data.value || '{}');
    if(resData.code == 200){
      // 余额充足
      diaologInfo.title = "提交任务";
      diaologInfo.text = "确认提交后已填写关键词的任务将会提交至平台进行审核, 您后续将无法修改对应任务的关键词 (审核不通过为例外情况).";
      diaologInfo.confirmText = "确认提交"
      diaologInfo.confirmDiaolog = () => {
        //调用新增接口
        handleAddKeyword();
  }
  confirmDiaolog.value.settingVisible()
    }else{
      if(resData.message === '您的余额不足，请充值'){
        weekDiaologRef.value.settingVisible()
      }else{
        EventBus.emit("openToastBox", [resData.message || '提交失败']);
      }
    }
  })
}else if(currentTask.value.status === "待修改"){
  diaologInfo.title = "提交任务";
  diaologInfo.confirmText = "确认"
  diaologInfo.text = "确认提交后已填写关键词的任务将会提交至平台进行审核, 您后续将无法修改对应任务的关键词 (审核不通过为例外情况).";
  diaologInfo.confirmDiaolog = () => {
    //调用关键词修改接口
    updateTask({
        switch: 1,
        keyword: currentTask.value.keywordEdit,
        keyword_id: currentTask.value.taskId,
      }).then(res => {
        let resData = JSON.parse(res.data.value || '{}');
        if (resData.code === 200) {
          eventBus.emit("openToastBox", ["已确认提交"]);
          confirmDiaolog.value.settingVisible(false);
          // 获取当前任务列表
          resetSearchForm();
          queryTaskListInfo(activeDemand.value.demandId)
        }
      })
  }
  confirmDiaolog.value.settingVisible()
  
}

}
const addLoading = ref(false)
// 新增接口
const handleAddKeyword = async() => {
  let parmas = {
    demand_id: activeDemand.value.demandId,
    start_time: '',
    end_time: '',
    keyword: ''
  }
  if (createTaskForm.value.createTaskType === 'single') {
    let flag = alltaskTime?.value?.some(dd => format(dd, 'yyyy-MM-dd') == format(createTaskForm.value.estimatedTime, 'yyyy-MM-dd'))
    if(flag && !currentTask.value.taskId){
      EventBus.emit("openToastBox", ["当前时间已存在任务，请重新选择时间！"]);
      return;
    }
      if(activeDemand.value.type === '单次任务'){
        parmas.start_time = format(activeDemand.value.start_time, "yyyy-MM-dd 00:00:00");
        parmas.end_time = format(activeDemand.value.end_time, "yyyy-MM-dd 23:59:59");
      }else{
        parmas.start_time = format(createTaskForm.value.estimatedTime, "yyyy-MM-dd 00:00:00");
      if(activeDemand.value.cycle === "日交"){
        parmas.end_time = format(createTaskForm.value.estimatedTime, "yyyy-MM-dd 23:59:59");
      }else{
        parmas.end_time = format(
            add(createTaskForm.value.estimatedTime, { days: 6 }),"yyyy-MM-dd 23:59:59"
          )
      }
    }
    parmas.keyword = createTaskForm.value.keyword;
    addLoading.value = true
    if (createTaskForm.value.taskId) {
      updateTask({
        switch: 6,
        keyword: createTaskForm.value.keyword,
        keyword_id: createTaskForm.value.taskId,
      }).then(res => {
        let resData = JSON.parse(res.data.value || '{}');
        if (resData.code === 200) {
          resetCreateTaskForm();
          confirmDiaolog.value.settingVisible(false);
            EventBus.emit("openToastBox", ["已确认提交"]);
            resetFilter()
            // 获取当前任务列表
            resetSearchForm();
            queryTaskListInfo(activeDemand.value.demandId, currentTask.value.taskId)
            // 获取当前余额信息
            initUserInfo();
        }else{
            EventBus.emit("openToastBox", [resData.message || "提交失败"]);
        }
      })
    }else{
        addTask(parmas).then(res => {
        let resData = JSON.parse(res.data.value || '{}');
        addLoading.value = false;
        if (resData.code === 200) {
          resetCreateTaskForm();
          confirmDiaolog.value.settingVisible(false);
            EventBus.emit("openToastBox", ["已确认提交"]);
            resetFilter();
            // 获取当前任务列表
            resetSearchForm();
            queryTaskListInfo(activeDemand.value.demandId, resData?.result?.id)
            // 获取当前余额信息
            initUserInfo();
        }else{
            EventBus.emit("openToastBox", [resData.message || "提交失败"]);
        }
      })
    }
  }else {
    if (createTaskForm.value.estimatedTimeList.length > 0) {
      if (hasDuplicateName(createTaskForm.value.estimatedTimeList)) {
        EventBus.emit("openToastBox", ["不能选择相同的日期，请重新选择时间！"]);
        return;
      }
      if(alltaskTime?.value?.some(dd => createTaskForm.value.estimatedTimeList.findIndex(ee => format(ee.time, 'yyyy-MM-dd') == format(dd, 'yyyy-MM-dd')) > -1)){
      EventBus.emit("openToastBox", ["当前时间已存在任务，请重新选择时间！"]);
      return;
    }

      addLoading.value = true;
      deguiAddKeyword(0)
    }

  }

};
const hasDuplicateName = (arr) => {
  const names = new Set();
  return arr.some(item => {
    if (names.has(item.time.getTime())) {
      return true; // 找到重复
    }
    names.add(item.time.getTime());
    return false;
  });
};
const deguiAddKeyword = (index) => {
  let ii = createTaskForm.value.estimatedTimeList[index];
        let parmas2 = {
          demand_id: activeDemand.value.demandId,
          start_time : format(ii.time, "yyyy-MM-dd 00:00:00"),
          end_time : null,
          keyword : ii.keyword,
        }
        if(activeDemand.value.cycle === "日交"){
            parmas2.end_time = format(ii.time, "yyyy-MM-dd 23:59:59");
          }else{
            parmas2.end_time = format(
                add(ii.time, { days: 6 }),"yyyy-MM-dd 23:59:59")
          }
          addTask(parmas2).then(res => {
        let resData = JSON.parse(res.data.value || '{}');
        if (resData.code === 200) {
          if (index < createTaskForm.value.estimatedTimeList.length - 1) {
            setTimeout(() => {
              return deguiAddKeyword(index + 1);
            }, 1000);
          }else{
            resetCreateTaskForm();
            confirmDiaolog.value.settingVisible(false);
            EventBus.emit("openToastBox", ["已确认提交"]);
            resetFilter()
            // 获取当前任务列表
            resetSearchForm();
            queryTaskListInfo(activeDemand.value.demandId)
            // 获取当前余额信息
            initUserInfo();
            addLoading.value = false;
            return true
          }

        }else{
          addLoading.value = false;
          EventBus.emit("openToastBox", [resData.message || "提交失败"]);
        }
      })
          


}
const handleAddTime = () => {
  if (!createTaskForm.value.estimatedTimeList) {
    createTaskForm.value.estimatedTimeList = [];
  }
  let len = createTaskForm.value.estimatedTimeList.length || 0;
  let time = new Date();
  if (len > 0) {
    time = createTaskForm.value.estimatedTimeList[len - 1].time;
  }
  if (activeDemand.value.cycle === "日交") {
    createTaskForm.value.estimatedTimeList.push({
        time: add(time, { days: 1 }),
        keyword: ""
      });
  }else{
    createTaskForm.value.estimatedTimeList.push({
        time: add(time, { days: 7 }),
        keyword: ""
      });
  }
};
const  datajiaoyi  = (e)=>{
  // 请求接口
  console.log(e)
}
const Trade = ref(false);
const gocancel = () => {
  dialogdemloes.value = false;
  setting.value = false;
  Trade.value = false;
};
const Demand = () => {
  dialogdemloes.value = true;
};
let sttingType = ref(false);
const setting = () => {
  sttingType.value = !sttingType.value;
};
const tradeitem = ref(0);
const gotradeitem = (a) => {
  tradeitem.value = a;
  orderPage.page = 1;
  radeOrderList.value = []
  queryOrderListData();
}
const handleGotoPreview = () => {
  // window.location.href ='./preview?taskId=' + currentTask.value.taskId
  window.open('./preview?taskId=' + currentTask.value.taskId)
}
const loadingMine = ref(false)
// 获取需求列表
const qeuryDemandList = (flag) => {
  loadingMine.value = true;
  queryDemandList({
    page: 1,
    num: 10000,
  }).then(res => {
    loadingMine.value = false;
    let resData = JSON.parse(res.data.value || '{}');
    if (resData.code === 200) {
      demandTabInfo.value = (resData.result?.data || []).map(ii =>{
        let status = ii.status == 1 ? '进行中' : '已完成';
        // 判断是否过期
        if (status === '进行中' && new Date() > new Date(ii.end_time * 1000)) {
          status = '已完成';
        }
        let endTime = ii.end_time == 9999999999 ? '长期' :new Date(ii.end_time * 1000);
        return {
          tabName: ii.name,
          demandId: ii.id,
          status: status,
          type: ii.repeat == 1 ? "重复任务" : "单次任务",
          cycle: ii.type == 1 ? '日交' : '周交',
          price: ii.price,
          // validityPeriod: format(new Date(ii.start_time * 1000), "yy.MM.dd") + '-' + endTime,
          lastTime: new Date(ii.atest_delivery_time * 1000),
          delivered: ii.num_ok,
          unDown: ii.num_pick,
          taskList:[],
          start_time: new Date(ii.start_time * 1000),
          end_time: endTime
        }
      })
      if(flag && history.state.demandId && history.state.taskId){
        reChooseTask()
      }else{
        handleClickTab(demandTabInfo.value[0] || {})
      }
    }else{
      demandTabInfo.value = []
    }
    
  })
};
const statusOrderMap = {
  2: 1,//待修改
  0: 1,
  5: 1,
  3: 4,
  4: 4,
  6: 4,
  7: 4,
  1: 5,
  8: 6,
  9: 7

}
const isFirst = ref(true)
const alltaskTime = ref([])
//获取任务列表（关键词列表）
const queryTaskListInfo = (demandId, taskId) => {
  return new Promise((resolve, reject) => {
  currentTaskPage.page = 1;
  let selectFilter = taskFilterList.value.filter(dd => dd.isSelect).map(dd => dd.value).join(",");
  let parmas = {
    demand_id: demandId,
    keyword: taskFilterForm.value.searchText,
    status_in: selectFilter,
    page: 1,
    num: 10000,
  }
  if (taskFilterForm.value.timeFilter) {
    parmas.end_start_time = format(taskFilterForm.value.timeFilter, "yyyy-MM-dd 00:00:00");
    if (activeDemand.value.cycle === "日交") {
      parmas.end_end_time = format(taskFilterForm.value.timeFilter, "yyyy-MM-dd 23:59:59");
    }else{
      parmas.end_end_time = format(add(taskFilterForm.value.timeFilter, { days: 6 }), "yyyy-MM-dd 23:59:59");
    }
    
  }
  queryTaskList(parmas).then(res => {
    let resData = JSON.parse(res.data.value || '{}');
    // 获取当前任务列表的下拉数据
    taskFilterList.value[0].num = resData.result?.pending_tasks_num || 0;
    taskFilterList.value[1].num = resData.result?.in_progress_num || 0;
    taskFilterList.value[2].num = resData.result?.task_completed_num || 0;
    if (resData.code === 200) {
      if (isFirst.value) {
        alltaskTime.value = (resData.result?.data || []).map(dd => new Date(dd.start_time * 1000))
      isFirst.value = false;
      }
      
      activeDemand.value.taskList = (resData.result?.data || []).map(dd => {
        let status = statusMap[dd.status] || '';
        let keyword = dd.keyword === ' ' ? '' : dd.keyword
        if (status === '待补充' && new Date() > new Date(dd.start_time * 1000)) {
          status = '未补充已过期'
        }
        let order = dd.status;//用于排序
        if (dd.status == 0 && keyword) {
          status = '已取消'
          order = 9
        }
        return {
          ...dd,
          keyword: keyword,
          taskId: dd.id,
          status: status,
          page: dd.manuscripts_num,
          estimatedTime: format(+(dd.start_time + '000'), "yyyy-MM-dd"),
          keywordList: [],
          versionNum: 1,
          manuscriptList:[],
          completionTime: dd.confirm_time ? dd.confirm_time : null,
          order: status === '未补充已过期' ? 10 : statusOrderMap[order]
        }
      }).sort((a, b) => a.order - b.order);
      activeDemand.value.taskAll = resData.result?.total || 0;
      if (taskId) {
        handleClickTask(activeDemand.value?.taskList.find(dd => dd.id === taskId));
      }else{
        handleClickTask(activeDemand.value?.taskList?.[0]);
      }
    }
    resolve()
  })
})
}

const isLoading = ref(false);  
const hasMore = ref(true); // 假设有更多数据可以加载  
const scrollContainer = ref(null); 

const handleScroll = () => {
  hasMore.value = activeDemand.value.taskAll > activeDemand.value.taskList.length;
  if (isLoading.value) return;  
  const { scrollTop, scrollHeight, clientHeight } = scrollContainer.value;  
  // 滚动到底部的条件  
  if (scrollTop + clientHeight >= scrollHeight) {
    scrollLoad()
  } 
}
const computedTaskNum = computed(() => {
  if (activeDemand.value.price) {
    return Math.floor(store.userInfo?.balance / activeDemand.value.price);
  }else{
    return 0
  }
})
const handleOpenTask = () => {
  if (!activeDemand.value.keyword_id) return;
  queryTaskList({
    demand_id: activeDemand.value.demandId,
    keyword_id: activeDemand.value.keyword_id,
  }).then(res => {
    let resData = JSON.parse(res.data.value || '{}');
    if (resData.code === 200) {
      const curData = (resData.result?.data || []).map(dd => {
        let status = statusMap[dd.status] || '';
          let keyword = dd.keyword === ' ' ? '' : dd.keyword
        if (status === '待补充' && new Date() > new Date(dd.start_time * 1000)) {
          status = '未补充已过期';
          keyword = '未及时添加关键词, 此任务已过期'
        }
        if (dd.status == 0 && keyword) {
          status = '已取消'
        }
        return {
          ...dd,
          keyword: keyword,
          taskId: dd.id,
          status: status,
          page: "1",
          estimatedTime: format(+(dd.start_time + '000'), "yyyy-MM-dd"),
          keywordList: [],
          versionNum: 1,
          manuscriptList:[],
        }
      });
      handleClickTask(curData[0]);
      
    }
  })
}
function convertStyleToWidth(htmlString, containerWidth) {
  // 定义正则表达式以匹配样式中的百分比宽度
  const regex = /style\s*=\s*"[^"]*width\s*:\s*(\d+)%[^"]*"/gi

  // 替换函数
  return htmlString.replace(regex, (match, percentage) => {
    // 计算宽度
    const width = (containerWidth * parseFloat(percentage)) / 100
    // 返回新的宽度属性
    return `width="${width}"`
  })
}
function getBlob (url) {
		return new Promise(async (resolve, reject) => {
      let response = await fetch(url, {method: 'GET'})
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      let curHmtl = await response.text();
      try {
      // 将HTML内容转换为Word文档
      // var converted = htmlDocx.asBlob(html)
      const updatedHtml = curHmtl.replace(
        /style="width:\s*(\d+\.?\d*)px;\s*height:\s*(\d+\.?\d*)px;"/g,
        (match, width, height) => {
          return `width="${width}" height="${height}"`
        }
      )
      // const newUrl = `<div style="width: 1200px;">${updatedHtml}</div>`
      const updatedHtml2 = convertStyleToWidth(updatedHtml, 1200)
      const { default: htmlDocx } = await import('html-docx-fixed/dist/html-docx');
      // 将HTML内容转换为Word文档
      var converted = htmlDocx.asBlob(updatedHtml2)
      resolve(converted);
    } catch (err) {
      reject('word转换失败')
    }
			// const XML = new XMLHttpRequest();
			// XML.open('GET', url, true);
			// XML.responseType = 'blob';
			// XML.onload = () => {
			// 	if (XML.status === 200) {
			// 		resolve(XML.response);
			// 	}
			// };
			// XML.send();
		});
	}
const downloadFile = (file) => {
	//下载文件
	function saveAs (blob, filename) {
		const elelink = document.createElement("a");
		elelink.style.display = 'none';
		elelink.download = filename;
		elelink.href = window.URL.createObjectURL(blob);
		document.body.appendChild(elelink);
		elelink.click();
		document.body.removeChild(elelink);
	}
	// 调用以上方法进行下载
	getBlob(file.url).then(blob => {
		saveAs(blob, file.name);
	});
}
const handleDownLoad = () => {
  updateTask({
      switch: 4,
      keyword_id: currentTask.value.taskId,
    }).then(async(res) => {
      let resData = JSON.parse(res.data.value || '{}');
      if (resData.code === 200) {
        let file_Arr = JSON.parse(resData.result || [])
        if (file_Arr.length <= 10) {
          file_Arr.forEach(file => {
          if (file.url) {
            downloadFile(file)
          }
        })
        }else{//大于10个打包下载
          const zip = new JSZip();
          try {
    // 使用 Promise.all 等待所有文件的 Blob 下载完成
    const filePromises = file_Arr.map(async (file) => {
      const blob = await getBlob(file.url);
      const fileName = file.name.endsWith('.docx') ? file.name : `${file.name}.docx`;
      const file2 = new File([blob], fileName, { type: blob.type });
      return { name: fileName, file: file2 };
    });

    // 等待所有文件处理完成
    const files = await Promise.all(filePromises);

    // 将所有文件添加到 zip 中
    files.forEach(({ name, file }) => {
      zip.file(name, file);
    });

    // 生成 ZIP 文件
    const content = await zip.generateAsync({ type: 'blob' });
    let zipName = currentTask.value.keyword || 'files'
    saveAs(content, `${zipName}.zip`);
  } catch (error) {
    console.error('生成 ZIP 文件失败', error);
  }
        }
        
    }else{
      Message.error(resData.message || "下载失败")
    }
  })
}
// const handleDownLoad = () => {
//   updateTask({
//       switch: 4,
//       keyword_id: currentTask.value.taskId,
//     }).then(res => {
//       let resData = JSON.parse(res.data.value || '{}');
//       if (resData.code === 200) {
//         let file_Arr = JSON.parse(resData.result || [])
//         debugger
//         file_Arr.forEach(file => {
//           if (file.url) {
//             downloadFile(file)
//           }
//         })
        
//     }else{
//       EventBus.emit("openToastBox", [resData.message]);
//     }
//   })
// }
const handleChangeTimePicker = (date) => {
if (new Date(date) === new Date(taskFilterForm.value.timeFilter)) {
  taskFilterForm.value.timeFilter = '';//再次选相同的取消
}
}
const padNumber = (num, size) => {
    // 将数字转换为字符串
    let numStr = num.toString();
    // 计算需要补齐的位数
    let diff = size - numStr.length;
    // 如果需要补齐，则在数字前面添加相应数量的0
    if (diff > 0) {
        // 使用 Array 方法填充0，并拼接原始数字字符串
        numStr = '0'.repeat(diff) + numStr;
    }
    return numStr;
}
// 计算日交可交付时间
const disabledDayDate = (time) => {
  const now = Date.now();
  
  const isEql = alltaskTime?.value?.some(dd => dd.getTime() === time.getTime())
  return time < now || isEql;
}
//计算周交可交付时间
const disabledWeekDate = (time) => {
  const startOfThisWeek = startOfWeek(new Date(), { weekStartsOn: 1 });
  const temTime = add(startOfThisWeek, { weeks: 1 })
  
  const timeStemp = startOfWeek(time, { weekStartsOn: 1 });
  const isEql = alltaskTime?.value?.some(dd => dd.getTime() == timeStemp.getTime())
  return time < temTime || isEql;
}
// 复制
const handleCopy = (text) => {
  EventBus.emit('openToastBox', ['复制成功！', text])
}
const resetFilter = () => {
  isFirst.value = true;
  taskFilterList.value.forEach(dd => dd.isSelect = false)
  taskFilterForm.value = {
  searchText: "",
  taskList:[],
  timeFilter:''
}
}
</script>

<style lang="scss" scoped>
.mine-pc {
  overflow: hidden;
  padding-bottom: 99px;
  background: #F3F3F5;

  .mine-base-info {
    width: $aiseoHomeWidth;
    margin: 0 auto;
    margin-top: 92px;
    height: calc(100% - 92px);
    display: flex;
    flex-direction: column;
    .no-demand{
      width: 1200px;
      height: 632px;
      background: #F3F3F5;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .my-info {
      width: 100%;
      height: 100px;
      background: linear-gradient(132deg, #2e2f33 0%, #1d1e24 100%);
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: 26px 32px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .info-left {
        display: flex;
        align-items: center;

        .info-left-txt {
          font-weight: bold;
          font-size: 10px;
          color: rgba(255, 255, 255, 0.3);
          letter-spacing: 1px;
        }

        .user-avatar {
          width: 48px;
          height: 48px;
          box-sizing: border-box;
          padding: 2px;
          border-radius: 50%;
          border: 2px solid rgba(255, 255, 255, 0.3);

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
          }
        }

        .info-left-content {
          margin-left: 12px;

          .username {
            font-weight: bold;
            font-size: 18px;
            color: #ffffff;
            max-width: 200px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }

        .info-my-Balance {
          margin-left: 56px;
          display: flex;
          align-items: center;

          .icon {
            width: 40px;
            height: 40px;
          }

          .balance-content {
            margin-left: 4px;

            .balance {
              line-height: 18px;
              font-family: Komu A, Komu A;
              font-weight: 500;
              font-size: 18px;
              color: #ffffff;

              .icon-CNY {
                height: 8px;
              }
            }
          }

          .Remaining-times {
            width: 160px;
            height: 27px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px 8px 8px 1px;
            // opacity: 0.1;
            margin-left: 12px;
            font-family: Microsoft YaHei UI, Microsoft YaHei UI;
            font-weight: 400;
            font-size: 12px;
            color: #afb0b3;
            line-height: 27px;
            text-align: center;
          }
        }
      }

      .info-right {
        display: flex;
        color: rgba(255, 255, 255, 0.3);
        font-size: 12px;

        .right-item {
          width: 64px;
          position: relative;
          text-align: center;
          cursor: pointer;

          .icon {
            width: 56px;
            height: 56px;
          }

          &+.right-item {
            &::before {
              content: "";
              width: 1px;
              height: 8px;
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
              background: rgba(255, 255, 255, 0.1);
            }
          }
        }
      }
    }
    .Demand-tab-outer{
      width: 100%;
      overflow: auto;
    }

    .Demand-tab {
      margin: 0 auto;
      display: flex;
      // justify-content: center;
      align-items: center;
      height: 80px;
      font-family: Microsoft YaHei UI, Microsoft YaHei UI;
      font-weight: bold;
      font-size: 18px;
      color: #7b7c80;
      gap: 24px;
      width: min-content;

      .Demand-tab-item {
        cursor: pointer;
        white-space: nowrap;
    .Demand-tab-item-name{
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 120px;
    display: inline-block;
    }

        // position: relative;
        .img-edit {
          // position: absolute;
          height: 16px;
          // top: 50%;
          // right: -22px;
          // transform: translateY(-50%);
        }
      }
    }

    .icon-status {
      position: absolute;
      left: 18px;
      top: 29px;
      width: 4px;
      height: 7px;
      border-radius: 24px;
    }

    .icon-status-will-do {
      background: #e6842e;
      box-shadow: inset 2px 2px 2px 1px rgba(81, 30, 11, 0.5);
    }

    .icon-status-doing {
      background: #4560e6;
      box-shadow: inset 2px 2px 2px 1px rgba(13, 28, 161, 0.56);
    }

    .icon-status-done {
      background: #abaeb3;
      box-shadow: inset 2px 2px 2px 1px rgba(11, 24, 86, 0.26);
    }

    .icon-status-will-do-text {
      color: #e68837 !important;
    }

    .icon-status-doing-text {
      color: #4560e6 !important;
    }

    .icon-status-done-text {
      color: #abaeb3 !important;
    }

    .detail-item {
      position: relative;

      &:first-child {
        padding-right: 32px;
      }

      &+.detail-item {
        padding: 0 32px;

        &::before {
          content: "";
          width: 1px;
          height: 12px;
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          background: rgba(0, 0, 0, 0.1);
        }
      }

      .detail-item-title {
        font-weight: 400;
        font-size: 12px;
        color: #adaeb3;
      }

      .info-status-img {
        height: 18px;
      }

      .detail-item-value {
        margin-top: 4px;
        font-family: Komu A, Komu A;
        font-weight: bold;
        // font-size: 14px;
        color: #47484d;
        white-space: nowrap;
        line-height: 18px;

        .unit {
          font-weight: bold;
          font-size: 10px;
          color: #abaeb3;
          margin-left: 4px;
        }

        .unit-CNY {
          height: 11px;
        }
      }

      .detail-item-value-number {
        font-size: 18px;
        font-weight: 500 !important;
        .end-time-long{
          font-family: Microsoft YaHei UI, Microsoft YaHei UI;
          font-weight: bold;
          font-size: 14px;
        }
      }
    }

    .active-Demand-tab {
      color: #2e2f33;
      position: relative;

      &::after {
        content: "";
        width: 8px;
        height: 3px;
        background: #e62e3d;
        box-shadow: 1px 1px 3px 1px rgba(230, 46, 61, 0.5);
        border-radius: 2px 2px 2px 2px;
        position: absolute;
        bottom: 2px;
        left: 4px;
      }
    }

    .Demand-tab-detail {
      width: 100%;
      height: 115px;
      background: #FFFFFF;
      border-radius: 12px;
      padding: 24px 36px;
      box-sizing: border-box;
      position: relative;

      .detail-title-line {
        .orange {
          background: #e6842e;
        }

        .detail-setting {
          width: 24px;
          height: 24px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          cursor: pointer;

          &>div {
            width: 4px;
            height: 4px;
            background: #c6c7cc;
            box-shadow: inset 1px 1px 1px 1px rgba(69, 96, 230, 0.26);
            border-radius: 50%;

            &+div {
              margin-top: 4px;
            }
          }
        }

        .detail-title {
          font-weight: bold;
          font-size: 14px;
          color: #7b7c80;
        }
      }

      .detail-content {
        margin-top: 12px;
        display: flex;
      }
    }

    .Demand-task-create {
      height: 791px;
      margin-top: 16px;
      background: #ffffff;
      border-radius: 12px;
      display: flex;

      .task-list {
        width: 424px;
        padding: 32px;
        position: relative;
        box-sizing: border-box;

        &::after {
          content: "";
          width: 1px;
          height: 644px;
          background: #c6c7cc;
          position: absolute;
          right: 0;
          top: 47px;
        }

        .task-title-line {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-weight: bold;
          font-size: 14px;
          color: #7b7c80;

          .task-num {
            color: #cc7529;
          }

          .el-icon {
            font-size: 18px;
            color: #2e2f33;
            cursor: pointer;
          }
          .task-filter{
            display: flex;
            .tips-filter{
              width: 6px;
              height: 6px;
              border-radius: 50%;
              background: #cc7529;
              position: absolute;
              right: 2px;
              top: 2px;
            }
            .icon-filter-normal{
              width: 28px;
              height: 28px;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 4px;
              position: relative;
              cursor: pointer;
                margin-left: 8px;
                &:hover{
                  background: rgba(217, 217, 219, 0.5);
                }
            }
            .icon-selected{
              background: #d9d9db;
          }
          }

          .el-calendar-icon {
            margin-left: 34px;
          }

          .task-search-box {
            :deep(.el-input) {
              .el-input__prefix {
                .el-icon {
                  color: rgba(46, 47, 51, 0.6);
                }
              }

              .el-input__wrapper {
                width: 252px;
                height: 42px;
                background: rgba(225, 227, 230, 0.3);
                box-shadow: none;
                border-radius: 8px;
              }
            }
          }
        }

        .create-button {
          margin-top: 16px;
          width: 100%;
          height: 60px;
          padding: 20px 26px;
          box-sizing: border-box;
          font-weight: bold;
          font-size: 14px;
          color: #2e2f33;
          display: flex;
          align-items: center;
          cursor: pointer;

          .el-icon {
            font-size: 20px;
            color: #17171a;
            margin-right: 20px;
          }
          &:hover{
            background: rgba(217, 217, 219, 0.5);
            border-radius: 12px;
          }
        }

        .task-list-ul {
          overflow: overlay;
          height: calc(100% - 120px);

          .task-item {
            width: 100%;
            height: 92px;
            display: flex;
            align-items: center;
            cursor: pointer;
            padding: 24px 20px;
            box-sizing: border-box;
            margin-top: 16px;


            // &+.task-item {
            //   margin-top: 8px;
            // }

            .status-img {
              width: 40px;
              height: 40px;
            }

            .task-item-info {
              margin-left: 16px;

              .info-time {
                font-family: Komu A, Komu A;
                font-weight: 500;
                font-size: 18px;
                color: #2e2f33;
              }

              .info-status-img {
                height: 17px;
                margin-left: 4px;
              }

              .info-status {
                display: inline-block;
                padding: 3px 4px;
                //                 background: #E6842E;
                // box-shadow: inset 2px 2px 2px 1px rgba(126,9,11,0.5);
              }

              .key-words {
                margin-top: 8px;
                font-weight: 400;
                font-size: 14px;
                color: #606166;
                width: 240px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
            }
          }
        }
        .task-item{
          &:hover{
                      border-radius: 12px;
                      background: rgba(217, 217, 219, 0.5);
                    }
        }           
        .active-task-item {
          background: #E1E3E6 !important;
          border-radius: 12px;
        }
      }

      .task-content {
        flex: 1;
        padding: 26px 32px 32px 28px;
        position: relative;
        user-select: none;

        .icon-status {
          top: 32px;
          left: 18px;
        }

        .task-detail-time {
          font-family: Komu A, Komu A;
          font-weight: 500;
          font-size: 20px;
          color: #47484d;
          line-height: 20px;
        }

        .task-detail-info {
          display: flex;
          margin-top: 20px;
        }
      }
      .sigle-task-timepicker{
            display: flex;
            align-items: center;
            justify-content: center;
            background: #D9D9DB;
            border-radius: 4px;
            width: 90px;
            height: 36px;
            text-align: center;
            margin-top: 12px; 
            img{
          margin-right: 4px;
        }
            .detail-item-value {
        font-family: Komu A, Komu A;
        font-weight: 500;
        font-size: 14px;
        color: #47484d;
        white-space: nowrap;
        line-height: 18px;
        .unit {
          font-weight: bold;
          font-size: 10px;
          color: #abaeb3;
          margin-left: 4px;
        }

        .unit-CNY {
          height: 11px;
        }
      }   
            .detail-item-value-number {
                  font-size: 18px;
                  .end-time-long{
                    font-family: Microsoft YaHei UI, Microsoft YaHei UI;
                    font-weight: bold;
                    font-size: 14px;
                  }
                }     
          }
      .icon-status-done-grey-fill {

        .detail-item-value {
          color: #ABAEB3 !important;
        }

        .process-content-title {
          color: #7B7C80 !important;
        }

        .keywords-item-text-downe {
          color: #C6C7CC !important;
        }

        .info-time {
          color: #ABAEB3 !important;
        }

        .key-words {
          color: #ABAEB3 !important;
        }
        .active-item-process{
          // background: rgba(217, 217, 219) !important;
        }
        :deep(.el-textarea){
          background: rgba(204, 204, 204, 0.3) !important;
            .el-textarea__inner{
              color: #CCC !important;
            }
          }
        .item-content-item{
          :deep(.item-time-picker ){
          .el-input__wrapper{
            .prefix-icon{
              opacity: 0.1;
            }
            .el-input__inner{
              color: #CCCCCC !important;
            }
          }
        }
        }
        .process-content-item-content{
          :deep(.el-textarea){
          background: #CCCCCC !important;
            .el-textarea__inner{
              color: #C6C7CC !important;
            }
          }
          .process-content-time{
            color: #C6C7CC;
          }
        }
      }
      .icon-status-done-grey-fill-click {
          .process-content-info{
            pointer-events: none;
          }
          .keywords-item-time{
            color: #ADAEB3 !important;
          }
          .complete-blue-color{
            color: #ADAEB3 !important;
          }
          .keywords-item-text-downe{
            background: rgba(204, 204, 204, 0.3) !important;
          }

      }
      }

    .task-detail-process {
      margin-top: 16px;
      display: flex;

      .process-icon {
        width: 52px;
        margin-top: 12px;

        .process-icon-img {
          &>img {
            width: 40px;
            height: 40px;
          }

          &+.process-icon-img {
            &::before {
              content: "...............";
              display: inline-block;
              height: 84px;
              width: 16px;
              color: #abaeb3;
              letter-spacing: 2px;
              transform: rotate(-90deg) translate(-26px, 40px);
            }
          }
        }
      }

      .process-triangle {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #FCFCFC;
        position: absolute;
        top: 150px;
        left: 81px;
        transform: rotate(90deg);
      }

      .process-content {
        margin-left: 16px;
        flex: 1;
        width: 0;
        height: 639px;
        background: #FCFCFC;
        border-radius: 8px 8px 8px 8px;
        position: relative;
        padding: 28px 32px;
        box-sizing: border-box;
        overflow: overlay;

        .process-content-title {
          font-weight: bold;
          font-size: 14px;
          color: #2E2F33;
          line-height: 32px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          cursor: pointer;
          img{
            width: 20px;
            height: 20px;
            opacity: 0.5;
          }
          .slider-icon-up{
            transform: rotate(180deg);
          }
          &:hover{
            position: relative;
            z-index: 1;
            &::after{
              content: "";
              height: 32px;
              width: calc(100% + 16px);
              background: #E1E3E6;
              border-radius: 8px;
              position: absolute;
              left: -8px;
              top: 0;
              z-index: -1;
            }
            img{
              opacity: 1;
            }
          }
        }
        .edit-color {
          color: #DB863C;
        }

        .time-picker-flex{
              display: flex;
              align-items: center;
            }
          .item-time-picker-process {
            border-radius: 4px;
            width: 90px;
            padding: 0;
            box-sizing: border-box;
            background: rgba(225, 227, 230, 0.3);
            &:hover{
              background: #E1E3E6;
            }
            .el-textarea:focus{
                border: 1px solid red !important;
              }
            :deep(.item-time-picker) {
            height: 36px;
            width: 100%;

            .el-input__icon {
              font-size: 16px;
              margin-right: 4px;
            }

            .el-input__wrapper {
              background: none;
              box-shadow: none;
              padding: 0;
              padding-left: 12px;

              .el-input__inner {
                font-family: Komu A, Komu A;
                font-weight: 500;
                font-size: 18px;
                color: #2e2f33;
                line-height: 18px;
              }
            }
          }
          }
          .item-time-picker-process-week {
            width: 144px;
          }
        .process-content-item-content {
          margin-top: 12px;
          display: flex;
          .item-choose-type{
            display: flex;
            align-items: center;
            padding: 10px 12px;
            cursor: pointer;
            color: #606166;
            border-radius: 4px;
            box-sizing: border-box;
            .content-item-icon {
            width: 16px;
            height: 16px;
            background: url("@/assets/image/mine/icon／keyword／single／grey@2x.png");
            background-size: cover;
            display: inline-block;
          }
          .content-item-icon-muiltiple{
            background: url("@/assets/image/mine/icon／keyword／multiple／grey@2x.png");
            background-size: cover;
          }
            &:hover{
              // border: 2px solid #4560E6;
              // box-shadow: 0 0 0 2px #4560E6 inset;
              background: rgba(69, 96, 230, 0.2);
              color: #4560E6;
              .content-item-icon {
            background: url("@/assets/image/mine/icon／keyword／single／blue@2x.png");
            background-size: cover;
          }
          .content-item-icon-muiltiple{
            background: url("@/assets/image/mine/icon／keyword／multiple／blue@2x.png");
            background-size: cover;
          }
            }
            &+.item-choose-type{
              margin-left: 20px;
            }
          }
          .active-item-choose-type{
            background: #4560E6;
            color: #FFFFFF;
            .content-item-icon {
            background: url("@/assets/image/mine/icon／keyword／single／white@2x.png");
            background-size: cover;
          }
          .content-item-icon-muiltiple{
            background: url("@/assets/image/mine/icon／keyword／multiple／white@2x.png");
            background-size: cover;
          }
          }

          .process-text {
            font-weight: bold;
            font-size: 14px;
            margin-left: 4px;
          }
          .active-item-process{
            .content-item-icon{
              opacity: 1;
            }
            .process-text{
              color: #2E2F33;
            }
          }

          .item-content-item {
            display: flex;
            align-items: center;
            padding: 10px 12px;
            cursor: pointer;
            &:hover{
            background: rgba(217, 217, 219, 0.5);
            }
            &+.item-content-item {
              margin-left: 20px;
            }
          }

          .active-item-process {
            background: rgba(217, 217, 219);
            border-radius: 4px;
            .prefix-icon{
              width: 16px;
              height: 16px;
            }

          }
          .multiple-task-time{
            .active-item-process:hover{
              background: rgba(217, 217, 219, 0.5) !important;
            }
          }

          .item-time-picker-process {
            border-radius: 4px;
            width: 90px;
            padding: 0;
            box-sizing: border-box;
            background: rgba(225, 227, 230, 0.3);
            &:hover{
              background: #E1E3E6;
            }
          }

          .item-time-picker-process-week {
            width: 144px;
          }

          :deep(.item-time-picker) {
            height: 36px;
            width: 100%;

            .el-input__icon {
              font-size: 16px;
              margin-right: 4px;
            }

            .el-input__wrapper {
              background: none;
              box-shadow: none;
              padding: 0;
              padding-left: 12px;

              .el-input__inner {
                font-family: Komu A, Komu A;
                font-weight: 500;
                font-size: 18px;
                color: #2e2f33;
                line-height: 18px;
              }
            }
          }
        }


        .form-item-textarea {
          width: 521px;
          min-height: 60px;
          background: none;
          border-radius: 8px;
          padding: 12px;
          box-sizing: border-box;
          border: 1px solid rgba(46,47,51,0.1);
          &:hover{
            border: 1px solid #2E2F33;
          }
          &:focus{
            border: 1px solid #2E2F33 !important;
          }
          :deep(.el-textarea__inner) {
            background: none;
            height: 100%;
            box-shadow: none;
            padding: 0;
            color: #757780;
            font-weight: 400;
            font-size: 12px;

            &::-webkit-input-placeholder {
              /* WebKit browsers，webkit内核浏览器 */
              color: #757780;
            }
          }
        }
        .form-item-textarea-diabled{
          :deep(.el-textarea__inner) {
            &::-placeholder{
              /* WebKit browsers，webkit内核浏览器 */
              color: #ADAEB3;
            }
            &::-webkit-input-placeholder {
              /* WebKit browsers，webkit内核浏览器 */
              color: #ADAEB3;
            }
          }
        }

        .keywords-version {
          margin-top: 20px;
          // height: 450px;
          overflow: overlay;

          .keywords-item {
            &+.keywords-item {
              margin-top: 24px;
            }
          }

          .keywords-item-info {
            display: flex;
            align-items: flex-end;
          }

          .keywords-item-time {
            font-weight: 400;
            font-size: 12px;
            color: #2E2F33;
          }

          .keywords-item-text {
            width: 521px;
            background: rgba(204,204,204,0.3);
            border-radius: 8px;
            border: 1px solid #CCCCCC;
            font-weight: 400;
            font-size: 12px;
            color: #C6C7CC;
            line-height: 20px;
            padding: 12px;
            box-sizing: border-box;
            overflow: auto;
            word-wrap: break-word;

            .el-icon {
              font-size: 14px;
              margin-right: 4px;
              transform: translateY(2px)
            }

          }

          .keywords-item-text-downe {
            font-weight: bold;
            font-size: 14px;
            background: rgba(69, 96, 230, 0.2);
            color: #4560E6;
            border: none;
          }
          .keywords-item-can-click{
            cursor: pointer;
            &:hover{
              .keywords-item-text-downe{
                background: #4560E6;
                color: #E9E9EB;
              }
              .process-content-time{
                color: #4560E6;
              }
            }
          }

          .process-content-time {
            color: #C6C7CC;
          }
          .complete-blue-color {
            color: #4560E6;
          }
        }

        .process-content-time {
          font-family: Komu A, Komu A;
          font-weight: 500;
          font-size: 14px;
          color: #abaeb3;
          margin-left: 8px;
        }

        .process-content-item {
          margin-top: 20px;

          .process-content-item-title {
            font-weight: 400;
            font-size: 12px;
            color: #2E2F33;
          }

          .multiple-task-time {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;

            .item-content-item {
              margin: 0 !important;
            }
          }

          .delete-button {
            cursor: pointer;
            align-self: center;
            img {
              width: 24px;
              height: 24px;
            }
          }
        }
        .process-content-item-disabel{
          pointer-events: none;

        }

        .add-button {
          width: 90px;
          height: 36px;
          background: rgba(217, 217, 219, 0.5);
          border-radius: 4px;
          opacity: 0.5;
          text-align: center;
          line-height: 40px;
          margin-top: 8px;
          font-size: 16px;
          cursor: pointer;
          img {
              width: 16px;
              height: 16px;
            }
            &:hover{
              background: #d9d9db;
            }
        }

        .commit-button {
          margin-top: 20px;
          transform: translateX(-8px);
          .normal-button{
            width: 212px;
            height: 52px;
            background-size: auto 100%;
          cursor: pointer;
            background-image: url("@/assets/image/mine/button／confirmAndProceed／normal@2x.png");
            &:hover{
            background-image: url("@/assets/image/mine/button／confirmAndProceed／hover@2x.png");
            }
          }
          .forbidden-button{
            width: 212px;
            height: 52px;
            background-size: auto 100%;
            background-image: url("@/assets/image/mine/button／confirmAndProceed／forbid@2x.png");
          }
        }
        .commit-button-forbidden{
          margin-top: 20px;
          img{
            height: 52px;
            transform: translateX(-8px);
          }
        }
        .commit-button-willconfirm{
          margin-top: 20px;
          transform: translateX(-8px);
          width: 176px;
            height: 52px;
            background-size: 100% 100%;
            cursor: pointer;
            background-image: url("@/assets/image/mine/button／confirmManuscript／normal@2x.png");
            &:hover{
            background-image: url("@/assets/image/mine/button／confirmManuscript／hover@2x.png");
          }
        }
        .downLoad-commit-button{
          margin-top: 20px;
          transform: translateX(-8px);
          width: 186px;
            height: 52px;
            background-size: 100% 100%;
            cursor: pointer;
            background-image: url("@/assets/image/mine/button／downloadOne／normal@2x.png");
            &:hover{
            background-image: url("@/assets/image/mine/button／downloadOne／hover@2x.png");
          }
        }

        .notes-for-user {
          margin-top: 20px;
          font-weight: 400;
          font-size: 12px;
          color: #abaeb3;
          line-height: 24px;
        }
      }
    }
  }
}

.demoslist {
  width: 100%;
  background: #e9e9eb;
  border-radius: 8px 8px 8px 8px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.listtext {
  background: #e9e9eb;
  padding: 20px;
  margin-top: 24px;
  width: 100%;
  border-radius: 8px 8px 8px 8px;
  box-sizing: border-box;
}

.setting-content {
  display: flex;

  .setting-content-left {
    width: 200px;

    .setting-item {
      height: 62px;
      width: 79px;
      line-height: 62px;
      color: #7b7c80;
      font-size: 16px;
      cursor: pointer;
      padding-left: 16px;
    }

    .active {
      width: 75px;
      color: #4560e6;
      border-left: 4px solid #4560e6;
    }
  }
}

.setting-content-right {
  .input-box {
    width: 528px;
    height: 48px;
    line-height: 45px;
    text-align: left;
    padding: 5px;
    box-shadow: 1px 3px 6px 1px rgba(45, 47, 51, 0.16);
    border-radius: 8px;
    border: 1px solid #2e2f33;
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .input-phone {
    width: 528px;
    height: 48px;
    background: #e1e2e6;
    box-shadow: 1px 3px 6px 1px rgba(45, 47, 51, 0);
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #e1e2e6;
    margin-top: 16px;
    text-align: left;
    line-height: 48px;
    padding-left: 16px;
    color: #c6c7cc;
    font-size: 14px;
  }

  .gooutlogin {
    width: 528px;
    height: 48px;
    box-shadow: 1px 2px 4px 1px rgba(179, 18, 21, 0.24);
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #e62e3d;
    text-align: left;
    line-height: 48px;
    padding-left: 16px;
    color: #E62E3D;
    border: 1px solid #E62E3D;
    margin-top: 16px;
    cursor: pointer;
    font-weight: bold;

  }
}

.fisder {
  height: 36px;
  background: #D9D9DB;
  border-radius: 4px 4px;
  line-height: 36px;
  text-align: center;
  color: #2E2F33;
  display: flex;
  align-items: center;
  padding: 14px 13px;
  cursor: pointer;
  box-sizing: border-box;
}

.card-content {
  display: flex;
  align-content: center;
  margin-top: 32px;

  .card-item {
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    margin-right: 16px;
    color: #7B7C80;
  }

  .active {
    color: #2E2F33;
    font-weight: bold;
  }
}
.list-content{
  .filker {
  // width: 850px;
  background: #E9E9EB;
  border-radius: 8px 8px 8px 8px;
  padding: 20px 0 20px 20px;
  margin-top: 28px;

  .idtitle {
    font-family: Komu A, Komu A;
    font-weight: 500;
    font-size: 20px;
    color: #47484D;

  }

  .demoslisttwo {
    display: flex;
    align-items: center;
    background: #E9E9EB;
    border-radius: 8px 8px 8px 8px;
    margin-top: 12px;
    >div{
      height: 37px;
    }
    .order-item-value{
      font-family: Komu A, Komu A;
      font-weight: 500;
      font-size: 17px;
      color: #606166;
      // margin-top: 4px;
    }
  }
}
}

   .profile-image {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        object-fit: cover;
    }

    .profile-image:hover {
         background: rgba(0, 0, 0, 0.5);
         cursor: pointer;
        content: url('@/assets/image/icon／settings.png'); /* 替换为悬停时要显示的图片路径 */
    }
</style>
<style lang="scss">
          .keywords-item-time img {
            max-width: 100% !important;
          }
.mine-week-diaolog-container-pay-box{
  text-align: left !important;
  .title{
    font-weight: bold !important;
    font-size: 16px !important;
    color: #2E2F33 !important;
  }
  p{
    font-weight: 400 !important;
    font-size: 12px !important;
    color: #ABAEB3 !important;
  }
  .slider{
    width: 100% !important;
    height: 1px !important;
    background: #C6C7CC !important;
    margin-top: 20px !important;
  }
}
.filter-timer2{
    .el-date-editor{
      display: none !important;
        width: 600px;
    }
    .el-date-range-picker{
      width: 100%;
    }
    .el-popper{
      position: relative !important;
      inset: 0 !important;
      border: 0;
      box-shadow: none;
      display: block !important;
      transform: none !important;
    }
    .el-popper.is-light{
      border: 0;
      box-shadow: none;
    }
    .el-date-picker{
      width: 100%;
      .el-picker-panel__content{
        width: calc(100% - 30px);
      }
    }
  }
  .filter-popper-box{
  padding: 26px 16px;
  box-sizing: border-box;
  border: 1px solid red;
  .el-popper__arrow{
    display: none;
  }
  .popper-title{
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    .lef{
      .title{
        font-weight: bold;
        font-size: 16px;
        color: #2E2F33;
      }
      p{
        font-weight: 400;
        font-size: 12px;
        color: #7B7C80;
        margin-top: 4px;
      }
    }
    >img{
      width: 42px;
      height: 42px;
    }
  }
  .line{
    width: 100%;
    height: 1px;
    background: #E1E2E6;
    margin: 20px 0;
  }
  .filter-list{
    .filter-item{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px;
      cursor: pointer;
      & + .filter-item{
        margin-top: 12px;
      }
      .filter-item-name{
        font-weight: bold;
font-size: 14px;
color: #2E2F33;
      }
      .filter-item-num{
        font-size: 12px;
        color: #7B7C80;
      }
    }
    .filter-item-active{
      background: #D9D9DB;
      border-radius: 4px;
    }
  }
  .filter-timer{
    .el-input{
      display: none !important;
    }
    .el-popper{
      position: relative !important;
      inset: 0 !important;
      border: 0;
      box-shadow: none;
      display: block !important;
      transform: none !important;
      background: none !important;
      .el-date-picker{
        background: none !important;
      }
    }
    .el-popper.is-light{
      border: 0;
      box-shadow: none;
    }
    .el-date-picker{
      width: 100%;
      --el-datepicker-hover-text-color: #4560E6;
      .el-picker-panel__content{
        width: calc(100% - 30px);
      }
      .el-date-table td.today .el-date-table-cell__text{
        color: #2E2F33;
        position: relative;
        &::before{
          display: inline-block;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          content: "";
          width: 4px;
          height: 4px;
          border-radius: 50%;
          background: #3355FF;
        box-shadow: 1px 1px 2px 1px rgba(69,96,230,0.46);
        }
      }
      .el-date-table td.current:not(.disabled) .el-date-table-cell__text{
        background: rgba(69, 96, 230, 0.3);
        box-shadow: 1px 2px 4px 1px rgba(69,96,230,0.24);
        border-radius: 4px 4px 4px 4px;
        font-weight: bold;
        font-size: 12px;
        color: #4560E6;
      }
      .el-date-table td.end-date .el-date-table-cell__text, .el-date-table td.start-date .el-date-table-cell__text{
        background: none;
        color: #2E2F33;
      }
      .el-date-table.is-week-mode .el-date-table__row.current .el-date-table-cell{
        background: rgba(69, 96, 230, 0.3);
      }
      .el-date-table td.start-date .el-date-table-cell{
        border-radius: 4px 0 0 4px;
      }
      .el-date-table td.end-date .el-date-table-cell{
        border-radius: 0 4px 4px 0;
      }
      .el-date-table__row{
        &:hover{
          .el-date-table td.start-date .el-date-table-cell{
        border-radius: 4px 0 0 4px;
      }
      .el-date-table td.end-date .el-date-table-cell{
        border-radius: 0 4px 4px 0;
      }
        }
      }
      .el-date-table td{
        color: #2E2F33;
        &:hover{
          color: #606266;
          .el-date-table-cell .el-date-table-cell__text{
          box-shadow: 1px 2px 4px 1px rgba(69,96,230,0.24);
          border-radius: 4px 4px 4px 4px;
          outline: 1px solid rgba(69, 96, 230, 0.5);
          box-sizing: border-box;
      }
        }
      }
      .el-date-table td.next-month, .el-date-table td.prev-month{
        color:#C6C7CC;
      }
      // .el-date-table td .el-date-table-cell .el-date-table-cell__text{
      //   &:hover{
      //     box-shadow: 1px 2px 4px 1px rgba(69,96,230,0.24);
      //     border-radius: 4px 4px 4px 4px;
      //     outline: 1px solid rgba(69, 96, 230, 0.5);
      //     box-sizing: border-box;
      //   }
      // }
    }
  }
} 
.demand-detail-dialog  {
  padding: 24px;
  .detail-content {
      margin-top: 12px;
      display: flex;
      background: #E9E9EB;
      border-radius: 8px 8px 8px 8px;
      padding: 20px;
        .detail-item {
      position: relative;

      &:first-child {
        padding-right: 24px;
      }

      &+.detail-item {
        padding: 0 24px;

        &::before {
          content: "";
          width: 1px;
          height: 12px;
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          background: rgba(0, 0, 0, 0.1);
        }
      }

      .detail-item-title {
        font-weight: 400;
        font-size: 12px;
        color: #adaeb3;
        white-space: nowrap;
      }

      .info-status-img {
        height: 18px;
      }

      .detail-item-value {
        margin-top: 4px;
        font-family: Komu A, Komu A;
        // font-weight: 500;
        font-weight: bold;
        font-size: 14px;
        color: #47484d;
        white-space: nowrap;
        line-height: 18px;

        .unit {
          font-weight: bold;
          font-size: 10px;
          color: #abaeb3;
          margin-left: 4px;
        }

        .unit-CNY {
          height: 11px;
        }
      }

      .detail-item-value-number {
        font-size: 18px;
        .end-time-long{
          font-family: Microsoft YaHei UI, Microsoft YaHei UI;
          font-weight: bold;
          font-size: 14px;
        }
      }
    }
      }

}
</style>
